Header-Hintergrundbild über die gesamte Seitenbreite

Hallo alle miteinander,

wie bekomme ich es hin, dass mein Hintergrundbild, welchens nur im Kopfbereich angezeigt werden soll, über die gesamte Seitenbreite angezeigt wird?
(Template Azure)

css:


#header 
{ 
width: 100%; 
padding: 0 10px; 
height: 215px; 
margin: 0; 
background-image: url(../bg/sbg.png); 
background-repeat: repeat; 
position: relative;
}

Verzweifelte Grüße aus dem Süden :o Hah…

Der header hat durch den page-Div-Container eine maximale Breite von 960 Pixel.
Du könntest das Bild aber z. B. dem body direkt mitgeben.

Wenn ich es richtig verstehe…dann habe ich das schon gemacht. Dann wird aber alles mit dem Hintergrundbild belegt.

wie wärs mit:

background:#fff url (../../bg.jpg) no-repeat top center; 

Da ich das Bild und die genauen Umstände nicht kenne, kann ich nur raten.
Du könntest z. b. noch die verschiedenen Einstellungen für background-repeat und
background-position ausprobieren.
Siehe: http://de.selfhtml.org/css/eigenschaften/hintergrund.htm

@Markus26: Danke. Aber das hilft mir leider nicht. Den Hintergrund muss ich wiederholen lassen, damit sich das Bildchen aufbaut. Hab´ mal deinen Leckerli-Shop angeschaut und im Grunde ist es das was ich will! Das was bei dir schwarz ist, sollte bei mir kariert sein.

@ChristiphH:
Die Positionen habe ich alle schon ausprobiert :wink: Ich komme nicht auf das gewünschte Ergebnis. Danke trotzdem, auch für den Link.

ok nocheinmal:

background:#fff url (../../bg.jpg) repeat-x top;

Grüße Markus

Hallo MiSal,

schau dir mal meine Seite an, da hab ich sowas ähnliches auch umgesetzt.
Das ist relativ einfach, ich hab den Header und den Footer aus dem page-div rausgenommen und jedem eine eigene Breite mitgegeben.

Nein, schau umbedingt meine Seite an. :slight_smile:

…was aber ein schlechtes Beispiel wäre, denn die ist ja nicht 100% W3C-Valide :smiley:

Schon gut, schon gut… es kommt keiner zu kurz, Jungs.:rolleyes:

@nickname:

Das ist relativ einfach, ich hab den Header und den Footer aus dem page-div rausgenommen und jedem eine eigene Breite mitgegeben.

“Relativ” ist deeeehnbar… sitze schon den ganzen Tag an diesem “Problemchen”. Will nun endlich Ergebnisse, Ergebnisse, Ergebnisse…! Ich versuch´s jetzt nochmal von vorn.

Du könntest dir doch den Quelltext auf Markus´ oder/und meiner Seite (damit keiner zu kurz kommt) ansehen und als Vorlage nehmen, denn auf beiden Seiten wurde es genau gleich gemacht. Es wurde der header aus dem page-div rausgenommen.

Wie aus der page-div rausgenommen?
Ich glau´da steht ´ne Elefantenherde auf meiner Leitung.

Hmm… man ändert doch alles in der oxid.css?

Nein, alles kann man nicht in der oxid.css ändern.
Evtl. müssten auch Änderungen im Template vorgenommen werden.

Vorher könntest du aber mal Markus´ CSS-Code ausprobieren. Du brauchst dafür ein Hintergrundbild (bg.jpg), das schon die gewünschte Höhe hat. Waagrecht (x-Achse) wird es dann wiederholt. Das müsste dann als Hintergrund in den body-Bereich:

body {
font: 12px / 140% arial, helvetica, clean, sans-serif;
background:#fff url (…/…/bg.jpg) repeat-x top;
}

Ok. Das hab ich verstanden und schon umgesetzt gehabt.
Jetzt interessiert mich trotzdem was du mit “page.div” gemeint hast. Wo finde ich das? In der .css finde ich nur #page. Muss ich also in einer bestimmten Templateseite etwas ändern?

(Sehr nett von euch, dass ihr mir helft, auch wenn das sehr einfache Fragen sind bzw. dies wohl zum Basiswissen gehören muss. Danke vielmals! )

Waaaahnsinn!!! :smiley: Ich hab´s hinbekommen!!! Glaub´s noch garnicht…WOW.:cool:

Hallo,

wäre nett, wenn mir jemand auf die Sprünge hilft.

Geändert habe ich nun die header.tpl und page.tpl. Auf den ersten Blick passt alles.
Nun ist aber eine neues Problem aufgetaucht und ich verstehe noch nicht warum!?
Auf der Produktdetailseite ist der Link “Zurück zur Übersicht” nach unten gerutscht und kann auch nicht mehr angeklickt werden.
Hier ein Bild: