Hintergrundbild über Div-Tag erweitern

[jorge_e]

Hallo liebe Internetgemeinde

Ich hab ein kleines Problem. Und zwar erstelle ich gerade mit Contao eine Website. Hierfür hab ich im BODY ein Hintergrundbild definiert (ein Verlauf), welcher dann in einer Seitenfarbe endet. Das ist noch kein Problem. Nun hab ich einen WRAPPER-DIV, den ich auf eine Breite von 900 px bringe und mit margin: 0 auto; auf der Webseite zentriere. Hier hab ich ebenfalls ein Hintergrundbild, welches allerdings Grösser als die 900 px ist. Das dumme ist, dass ich das Hintergrundbild aber so haben möchte, dass es, falls der Browser es zulässt komplett angezeigt wird (also über den DIV hinaus angezeigt wird). Ich dachte, das könnte ich mal eben mit dem overflow:visible; erledigen. Aber irgendwie bekomme ich das nicht hin. Geht das überhaupt (ich dachte schon).

Hat mir jemand einen Tipp???

Vielen Dank im Voraus

Grüsse

Georg

[Azra]

Du kannst dem Container "wrapper" die Breite des Bildes vergeben und den eigentlichen Inhalt über padding (Innanabstand) regeln. Somit kann das Bild angezeigt werden sowie der Content auf 900px geregelt werden.

Beachte dass sich alles addiert - z.B. width:900px; + padding-left:20px; + padding-right:20px; = Wrapper wäre im Browser 940px breit.

[jorge_e]

Danke für den Tipp ... leider ist das nicht so einfach.

Ich hab zum besseren Verständnis mal das Bild angehängt. Die eigentliche Breite ist der Bereich zwischen den grünen Balken. Links soll der äussere Baum etwas über den Bereich schauen und rechts die Sonnenstrahlen (die sind png24 transparent). Also wenn ich das Bild einfüge könnte ich es so positionieren wie ich es bräuchte. Was allerdings nervt sind dann die Scrollbalken. Da könnte man dann scrollen und eigentlich gibts (bis auf die Sonnenstrahlen) nichts zu sehen). Deshalb dachte ich, ich könnte das irgendwie als Hintergrundbild für den Wrapper (den ich zum Zentrieren nehme) hinterlegen und mit einem overflow: visible oder einem z-index entsprechen anzeigen lassen. Leider kommt immer nur der Bereich in den 900 px. Das Drumherum (grafisches Beiwerk, Sonnenstrahlen) werden abgeschnitten. Die möcht ich aber, falls ein User einen grossen Monitor hat anzeigen, und falls nicht sollen sie abgeschnitten werden. Auf keinen Fall einen Scrollbalken.

Für weitere Tipp bin ich noch immer dankbar.

Danke

Grüsse

Georg

[sejuma]

Bringt dich das weiter?

Code: Alles auswählen

background-position: center top;

oder ggf. auch

Code: Alles auswählen

background-position: right top;

[benm]

Evtl. denk ich da jetzt zu einfach aber …
leg doch einfach das eigentliche Hintergrundbild in html und den 2ten teil in body?

html
{
background-image:url();
}

body
{
background-image:url();
}