[GELÖST] CSS Hintergrundbild verschiebt sich trotz background-attachment:fixed

[w202mg]

Hallo Leute,
das wiederholte Hintergrundbild wird seitlich verschoben wenn ich das Fenster verkleinere.
http://www.richstaker.com

CSS sieht so aus:

body {
width: 100%;
min-width: 100%;
position: static;
background-color: #B1B1B1;
background-position: center top;
background-repeat: repeat-y;
background-image: url(/tl_files/music_academy/background.gif);
background-attachment: fixed;
}

Woran kann das Liegen?

[hermes2.11]

Hallo,

ist das nicht im Prinzip das gleiche Problem wie hier:

https://community.contao.org/de/show...ckground-Image


Gruß

[w202mg]

Hi,
also mein Hintergrundbild ist breiter als der Wrapper. Wenn ich das Hintergrundbild packe, dann wird es an den Seiten abgeschnitten. Und das Hintergrundbild wird auch verschoben.

[Bas]

Das Hintergrundbild ist im Body auf der x-position mit center positioniert, hat damit keinen Bezug zu den Inhalt-DIVs und genau so verhält er sich ... wenn Du den Browser (body) schmaler ziehst, bleibt das Hintergrundmotiv immer mittig, nur das die darüberliegenden DIVs ne feste Breite haben.

Lösung ... installier nen zusätzlichen DIV, der deinen wrapper umfasst und dem gibst Du die Background-Grafik. Da dieser DIV den Wrapper dann beinhaltet, wird dieser immer mindestens so breit wie der Inhalt sein, und damit stimmts dann. Denk daran dem Body und dem neuen DIV min-height von 100% mitgeben musst. (bzw. musst Du mal testen, bin mir nicht ganz sicher ob min-height oder height korrekt ist)

[w202mg]

Hi,
also in der Zwischenzeit habe ich mal etwas rum experimentiert. Irgendwie komme ich nicht auf das gewünschte Ergebnis. Ich hatte mal in Chrome den Wrapper in ein DIV eingeschlossen und ein Hintergrundbild verpasst. Der Wrapper hatte sich nach oben verlagert und der ganze Inhalt hat sich auf den ganzen Bildschirm verteilt.

Wie mache ich das denn richtig?

[tschero]

Hi,

wenn Du die ganze Hintergrundgeschichte vom body-selektor wegnimmst und folgendes auf den #wrapper legst könnte es "für den Anfang" das sein was Du suchst.

#wrapper
{
background-image: url("/tl_files/music_academy/background.gif");
margin: 0 auto;
margin: 0 auto;
width: 870px;
}

getestet im FireBug.

Gruß
tschero

[w202mg]

Hi,
das habe ich schon probiert.
Leider wird dann das Hintergrundbild auf den Seiten abgeschnitten, weil der Wrapper schmaler als das Bild ist.

[tschero]

Hab mich verschrieben,

#wrapper
{
background-image: url("/tl_files/music_academy/background.gif");
margin: 0 auto;
padding: 0 15px;
width: 870px;
}

Mit dem padding sollte es gehen.

Gruß
tschero

[w202mg]

Jawohl!
Das war das!

Vielen vielen Dank!