CSS3 - Hintergrund

1. Neue Möglichkeiten

... Hier haben sich die oft gescholtenen Leute vom W3C auch wieder ein paar nette Sachen einfallen lassen. Außerdem ist die Browserunterstützung im Vergleich zu Rahmenbildern deutlich besser. Mit den folgenden Eigenschaften kommen alle modernen Browser klar.

18.0
12.x
5.1
23.0
9.0/10.0

2. Mehrfache Hintergrundbilder

Um das zu erreichen, listet man die einfach innerhalb der background-Eigenschaft hintereinander auf. Die einzelnen Angaben werden durch Komma voreinander getrennt. Auf die Details werde ich in den kommenden Tutorials eingehen, da es dabei um ein paar wichtige Feinheiten geht.

Beispiel

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.


.multiple {
  padding: 19px 20px;      
  background: url(../../pics/common/ie.gif) no-repeat bottom left,
              url(../../pics/common/ie.gif) no-repeat bottom right,
              url(../../pics/common/ie.gif) no-repeat top left,
              url(../../pics/common/ie.gif) no-repeat top right,
              url(../../pics/common/cr.gif) repeat-x bottom left,
              url(../../pics/common/ff.gif) repeat-x top left,
              url(../../pics/common/sf.gif) repeat-y top left,
              url(../../pics/common/op.gif) repeat-y right top;
  
}

3. `background-clip`

Damit beeinflusst man den "Geltungsbereich" eines Hintergrunds. Dafür stehen drei Werte zur Verfügung, von denen zwei allerdings nur im Zusammenhang mit einem "löchrigen" Rahmen sind.

Beispiele

`border-box`

Der Hintergrund geht über das komplette Element inklusive Rahmen.

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.


.border-box {
  padding: 10px;  
  border: 5px dashed #3672a9;
  background-color: #dfdfdf;
  background-clip: border-box;
}

`padding-box`

Der Rahmen wird vom Hintergrund ausgespart.

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.


.padding-box {
  padding: 10px;  
  border: 5px dashed #3672a9;
  background-color: #dfdfdf;
  background-clip: padding-box;
}

`content-box`

Ein möglicher Rahmen und die padding-Angabe werden ausgespart.

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.


.content-box {
  padding: 10px;  
  border: 5px dashed #3672a9;
  background-color: #dfdfdf;
  background-clip: content-box;
}

4. `background-origin`

Arbeitet genauso wie background-clip bezieht sich aber nur auf Hintergrundbilder. Das Prinzip an sich ist dasselbe.

Beispiel

`border-box`

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.


.origin-border {
  padding: 10px;  
  border: 5px dashed #3672a9;
  background: #dfdfdf url(../../pics/common/ie.gif) no-repeat;
  background-origin: border-box;
}

`padding-box`

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.


.origin-padding {
  padding: 10px;  
  border: 5px dashed #3672a9;
  background: #dfdfdf url(../../pics/common/ie.gif) no-repeat;
  background-origin: padding-box;
}

`content-box`

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.


.origin-content {
  padding: 10px;
  border: 5px dashed #3672a9;
  background: #dfdfdf url(../../pics/common/ie.gif) no-repeat;
  background-origin: content-box;      
}

5. `background-size`

Bestimmt die Größe eines Hintergrundbildes. In den folgenden Beispielen ist das Originalbild 450 breit sowie 25px hoch und das Container-Element nur 340 Pixel breit. Um das Bild nun entsprechend zu skalieren, sind drei Angaben möglich.

Zahlengabe in px, % oder em
contain
cover

Beispiel

Zahlenangabe

Das Hintergrundbild wird auf die absoluten Werte skaliert.

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt.


.background-size-1 {
  width: 330px;
  padding: 10px 5px 5px 5px;
  background: #dfdfdf url(../../pics/css/bgsize.gif) no-repeat;  
  background-size: 340px 10px;
}

`contain`

Das Hintergrundbild wird relativ zur Gesamtbreite skaliert. Entspricht der Angabe 100%.

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt.


.background-size-2 {
  width: 330px;
  padding: 15px 5px 5px 5px;
  background: #dfdfdf url(../../pics/css/bgsize.gif) no-repeat;  
  background-size: contain;
}

`cover`

Das Hintergrundbild füllt die Fläche komplett aus. Na ja, wer drauf steht.

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt.


.background-size-3 {
  width: 330px;
  padding: 15px 5px 5px 5px;
  background: #dfdfdf url(../../pics/css/bgsize.gif) no-repeat;  
  background-size: cover;
}

6. Ein paar gaaaanz wichtige Hinweise

Das Arbeiten mit den neuen Hintergrundeigenschaften sieht auf den ersten Blick sehr einfach aus. Es gibt aber einige Fälle, wo ihr böse Überraschungen erleben werdet. Das ich selber noch nicht ganz ausbaldowert habe, kommen die Feinheiten in den nachfolgenden Tutorials. Vorab aber schon mal ein paar Hinweise.

Setzt man background-clip: content-box; in Kombination mit einem Hintergundbild ein, so wird das seltsamerweise verkleinert.
Arbeitet man bei background-origin: content-box; mit einem repeat-x, so wird das links und rechts ignoriert.
Bei background-size sollte man prozentuale Angaben vermeiden wie der Teufel das Weihwasser. Also bitte als Angaben nur px oder contain/100%. cover sieht sch***ße aus und bei % oder em müsst ihr fürchterlich frickeln, bis es passt.
Seht auf jeden Fall zu, dass das Hintergrundbild immer größer ist als das Element. Denn wenn es nach oben skaliert wird, so ist das Ergebnis nicht so pralle.

zurück zum vorherigen Abschnitt weiter zum nächsten Abschnitt