Zwei body backroundimages hintereinander aber wie?

**OneChance** · 06.03.2010, 10:25

Hallo Leute,
bin wieder an ein kleines Problem gestoßen wo ich nicht weiss wie man das unter TL am schönsten löst!
Folgendes habe ein body image schon vergeben und würde gerne dahinter noch eines setzten das sich auf der x-achse wieder holt.
Jetzt weiss ich aber nicht wie das hinzubekommen ist, kann mir da einer von euch helfen?

Danke jetzt schon für eure hilfe!

**gHeldT** · 06.03.2010, 10:45

Hallo edge,

also in CSS2 kann man einem element jeweils nur ein background-image verpassen. Du müsstest das also mit einem anderen Element hinter body machen - das wäre html! Keine Ahnung gerade, ob das überhaupt geht!? Sonst brauchst du ein anderes Element vor body, gibst dem das Bild, was du im Moment für body benutzt und dann das Bild, was dahinter soll für body!?

In CSS3 sind mehrer background-images pro Element vorgesehen - weiß nicht, ob es schon Browser gibt, die das unterstützen.

Viele Grüße

**medamind** · 06.03.2010, 11:10

Hallo,

warum nutzt du dafür nicht das #wrapper-Element?
Du könntest also das Hintergrundbild, das du derzeit für body nutzt, für #wrapper nutzen und dann dein zweites für body.
(die sinnvolle Reihenfolge musst du natürlich selbst festlegen)
Falls du das #wrapper Element bereits anderweitig "belegt" hast, kannst du dir ja auch eine eigene fe_page basteln, die ein weiteres, zusätzliches div-Element um den Wrapper legt.

So siehts derzeit aus:
<body id="top"<?php if ($this->class): ?> class="<?php echo $this->class; ?>"<?php endif; if ($this->onload): ?> onload="<?php echo $this->onload; ?>"<?php endif; ?>>
<div id="wrapper">
...
</div>
</body>

und so könntest du es machen:

<body id="top"<?php if ($this->class): ?> class="<?php echo $this->class; ?>"<?php endif; if ($this->onload): ?> onload="<?php echo $this->onload; ?>"<?php endif; ?>>
<div id="wrapper_1">
<div id="wrapper">
...
</div>
</div>
</body>

Viele Grüße
Anne-Kathrin

***lucina*** · 06.03.2010, 11:17

Zitat von gHeldT

In CSS3 sind mehrer background-images pro Element vorgesehen - weiß nicht, ob es schon Browser gibt, die das unterstützen.

Webkit-Browser sollten das in aktuellen Versionen können. Opera demnächst, der IE in Version neun (wer's glaubt ...).

@edgeMedia: Du hast doch body, und Du hast #wrapper - reicht das nicht? Ansonsten könntest Du da ja gezielt im Template erweitern. Gut dokumentiert ist das dann auch bei Updates ein Zweizeiler.

Carolina.

**OneChance** · 06.03.2010, 12:37

Danke für eure schnellen Antworten, aber ich glaube das ich eines vergessen habe zu sagen.
Es ist nämlich so das meine 960px breit ist das hintergrund bild aber 1600px breit und zusätlich soll ein verlauf dahinter wiederholt werden.

Ist sowas überhaupt möglich?

Den die Idee mit dem #wrapper hatte ich schon nur der begrenzt mich auf die 960px. Oder habe ich da was falsch verstanden?

**medamind** · 06.03.2010, 12:41

Hallo,

du kannst mit einer eigenen fe_page so viele weitere Wrapper um den bestehenden herumbauen, wie du magst :-)

Hier beispielsweise:
<body id="top"<?php if ($this->class): ?> class="<?php echo $this->class; ?>"<?php endif; if ($this->onload): ?> onload="<?php echo $this->onload; ?>"<?php endif; ?>>
<div id="wrapper_1">
<div id="wrapper">
...
</div>
</div>
</body>
könntest du mit

#wrapper_1{
...
width: 1600px;
...
}

einen weiteren 1600 Pixel breiten "Container" um den 960 Pixel breiten Container herum definieren.

Viele Grüße
Anne-Kathrin

**Thomas** · 06.03.2010, 12:43

Eine vorstellbare Lösung wäre 2 Boxen oberhalb des Wrappers (<div class="box_1"></div><div class="box_2"></div>), denen man die Bilder zurodnet und dann per CSS positioniert.
Entsprechend dem dann hinter der Seite anzeigen läßt.
Um eben den vielen Browsern gerecht zu werden.

Gemacht habe ich das aber auch noch nie.

**OneChance** · 06.03.2010, 13:06

So Leute noch mal Danke.
Habe das ganze jetzt gelöst und bin mal wieder selber am Schlauch gestanden.
Mit dem zusätzlichen wrapper ist es eh gegangen da der ja nicht auf die 960px fixiert ist.
Danke noch mal!

**barz** · 06.03.2010, 15:08

Zitat von edgeMedia

So Leute noch mal Danke.
Habe das ganze jetzt gelöst und bin mal wieder selber am Schlauch gestanden.
Mit dem zusätzlichen wrapper ist es eh gegangen da der ja nicht auf die 960px fixiert ist.
Danke noch mal!

Hast Du dann nicht auf allen Seiten (1600px) elende doppelte Scrollbalken?
Gruß

**psren** · 17.05.2010, 13:14

Falls du deinen Wrapper nicht anderseitig och belegt hast, kannst du auch die gesamtbreite deiner Seite auf 100% setzen, und dann
body dein Hintergrundbild
#wrapper dein verlauf

HTML-Code:

#header, #footer, #container {width: 960px; margin: auto;}

setzen...

geht aber nur, wenn du den wrapper eben nicht schon mit einem hintergrund, schatten oder sonstigen belegt hast, und dies auch nicht vorhast.

**Andreas** · 17.05.2010, 22:02

Zitat von barz

Hast Du dann nicht auf allen Seiten (1600px) elende doppelte Scrollbalken?
Gruß

Er darf dieses DIV einfach nicht auf 1600px Breite setzen. Einfach keine Breite angeben, dann erstreckt er sich automatisch über die gesamte Viewportbreite. Das Hintergrundbild dann einfach horizontal zentrieren.

Gruß

**ph!L** · 20.05.2010, 14:22

Ich würde einfach den hier schon kurz angebrachten Weg des <html> Tags nehmen.

im CSS:

HTML-Code:

html { background: url(verlauf.gif } repeat-x top left;
body { background: url(hintergrundvorverlauf.gif } no-repeat top left;

Funktioniert ganz wunderbar!

Thema: Zwei body backroundimages hintereinander aber wie?

Themen-Optionen

Thema durchsuchen

Zwei body backroundimages hintereinander aber wie?

Aktive Benutzer

Aktive Benutzer

Ähnliche Themen

Falsche Bild-Verknüpfungen - 2 x Domainname hintereinander

Zwei Mitgliedergruppen und zwei Loginformulare

<body> Hintergundfarbe ändern

Buch gelesen - aber noch zwei Fragen ;-)

body und background-image

Lesezeichen

Lesezeichen

Berechtigungen

Contao

Empfohlene Webdesign-Bücher