Hintergrundbild negativer Wert

[Blockwart]

Hallo liebe Forengemeinde,

heute mal eine Frage zu CSS.
Gegeben ist ein DIV-Container mit einer Höhe von 100px und einer Breite von 100px.
Nun möchte ich ein Hintergrundbild angeben, welches um 50px über den linken Rand hinausragt. Dazu habe ich folgendes notiert:

  
  
#container {  
 width: 100px;  
 height: 100px;  
 margin: 0 auto;  
 padding: 0;  
 background: url(images/layout/hintergrundbild.png) no-repeat;  
 background-position:-50px;  
 overflow:visible;  
}  
  

Leider wird der Teil des Bildes, welcher über den linken Rand des Containers hinausragt (background-position:-50px), nicht angezeigt.
Ich vermute, dass overflow:visible hier der falsche Ansatz ist, da es sich ja aum ein Hintergrundbild handelt.

Gibt es für dieses Problem eine Lösung?

Viele herzliche Grüße
der Blockwart

[Hansi]

Gibt es für dieses Problem eine Lösung?

Falls ich dich Richtig verstanden habe, dann könnte es so klappen...

+--------------------+ --> DIV 1 (außen mit Hintergrundbild)
|                    | --> Deine -50px Abstand
|+------------------+ ---> DIV 2 (innen, ohne Hintergrundbild)
||                  ||
||                  ||
||                  ||
||                  ||
||                  ||
||                  ||
||                  ||
||                  ||
|+------------------+|
+--------------------+

  
#div1 { position:absolute; height:150px; width:100px; background-image:url(example.jpg); }  
#div2 { position:relative; height:100px; width:100px; margin-top:50px; background-color:transparent; }  

[Blockwart]

hallo hansi,

das stimmt, so sollte es gehen. Eine Lösung ohne umgebendes DIV wäre mir natürlich am liebsten.

gruss

[Gunnar Bittersmann]

@@Blockwart:

nuqneH

Hallo liebe Forengemeinde,

heute mal eine Frage zu CSS.
Gegeben ist ein DIV-Container mit einer Höhe von 100px und einer Breite von 100px.
Nun möchte ich ein Hintergrundbild angeben, welches um 50px über den linken Rand hinausragt.

Der Hintergrund einer Box ragt nicht über sie hinaus. „Beim Box-Modell bezieht sich der ‚Hintergrund‘ auf den Hintergrund der Inhalts- und Polsterbereiche (padding).“ [CSS2 §14.2]

Du möchtest der Box links 50 Pixel Padding geben:

#container {  
  width: 100px;  
  height: 100px;  
  margin: 0 auto;  
  padding: 0 0 0 50px;  
  background: url(images/layout/hintergrundbild.png) no-repeat;  
  overflow:visible;  
}

Qapla'

[MudGuard]

Hi,

Der Hintergrund einer Box ragt nicht über sie hinaus. „Beim Box-Modell bezieht sich der ‚Hintergrund‘ auf den Hintergrund der Inhalts- und Polsterbereiche (padding).“

und die border:

Background in CSS 2.1: In terms of the box model, "background" refers to the background of the content, padding and border areas.

[CSS2 §14.2]

CSS 2.0 ist out. Wenn Du nicht immer diese veraltete Übersetzung benutzen würdest, würdest Du vielleicht auch korrekte Informationen bringen ...

Aber selbst in CSS 2.0 gilt:
Background in CSS 2.0 (Errata): In terms of the box model, "background" refers to the background of the content, padding and border areas.

cu,
Andreas

[ChrisB]

Hi,

Gegeben ist ein DIV-Container mit einer Höhe von 100px und einer Breite von 100px.
Nun möchte ich ein Hintergrundbild angeben, welches um 50px über den linken Rand hinausragt.

Du möchtest also nicht nur die Hauswand, sondern auch noch ein paar Quadratmeter Luft neben dieser anstreichen ...?

MfG ChrisB