Anton: Hintergrundgrafik festlegen die nicht bis in den margin geht

Morgen,

dem body meiner Webseite würde ich gerne eine Hintergrundgrafik verpassen. Wie im Code unten zu sehen ist, hat mein body eine Breite von 950 Pixeln. Er besitzt einen oberen bzw. unteren margin von jeweils 20 Pixeln. Durch "auto" wird dafür gesorgt, dass die Webseite unabhängig von der Auflösung im Browser zentriert wird. Die Hintergrundgrafik wird auch im margin des bodys eingeblendet. Genau das stört mich. Stattdessen hätte ich gerne, dass die Hintergrundgrafik nur im Inhaltsbereich und im Paddingbereich des bodys eingeblendet wird (nicht im margin-Bereich). Wie kann ich das denn am elegantesten hinbekommen? Ich will keine zusätzlichen DIV-Container verwenden.

  
* {  
  margin: 0px;  
  padding: 0px;  
}  
  
body {  
  width: 950px;  
  margin: 20px auto;  
  background: url(../images/seperatorNavigationContent.jpg) repeat-y;  
}  

  1. Guten Morgen!

    Der Body nimmt unter den Elementen im Dokument nun mal eine Sonderstellung ein - sein Hintergrund ist immer auf der ganzen Seite zu sehen. Du wirst also um das eine zusätzliche div nicht herum kommen.

    Gruß, LX

    --
    X-Self-Code: sh:( fo:) ch:~ rl:° br:> n4:& ie:% mo:) va:) de:] zu:) fl:{ ss:) ls:~ js:|
    X-Self-Code-Url: http://emmanuel.dammerer.at/selfcode.html
    X-Will-Answer-Email: Unusual
    X-Please-Search-Archive-First: Absolutely Yes
    1. Hi,

      Der Body nimmt unter den Elementen im Dokument nun mal eine Sonderstellung ein - sein Hintergrund ist immer auf der ganzen Seite zu sehen. Du wirst also um das eine zusätzliche div nicht herum kommen.

      Man koennte dem Body auch oben und unten einen entsprechenden Border gegeben - natuerlich nur, wenn man den "Abstand" einfarbig gestalten will, und nicht etwas das Hintergrundbild von html dort sehen will.
      Und koennte moeglicherweise sein, dass aeltere IE das nicht raffen.

      MfG ChrisB

      --
      „This is the author's opinion, not necessarily that of Starbucks.“
  2. Hallo,

    definiere eine Hintergrundfarbe oder -bild für das html-Element.

    Gruß

    1. definiere eine Hintergrundfarbe oder -bild für das html-Element.

      Coole Sache. Kannst du mir vielleicht auch noch verraten warum das dann klappt?

      1. Hallo,

        Coole Sache. Kannst du mir vielleicht auch noch verraten warum das dann klappt?

        CSS 2.1 definiert das. Wenn background-color und background-image des html-Elements die Standardwerte besitzen nehmen sie stattdessen die Werte des body-Elements an und die Werte für das body-Element selbst werden ignoriert.

        Ich denke diese Sonderregelung wurde aus Rückwärtskompatibilität eingeführt, weil früher Hintergrundbilder und -farben immer über das body-Element definiert wurden.

        Gruß.