CSS Backgroundimage

CSS Backgroundimage Teaser

In diesem Artikel erläutere ich wie man einem DIV Container eine Hintergrundbild verpasst und dieses noch nach seinen Wünschen ausrichtet.

Hintergrundbild

zuerst muss mit CSS ein Hintergrundbild gesetzt werden:

div {
  background-image: url("pfad/zum/bild/hintergrund.jpg");
}

background-repeat

Bei der Wiederholung kann eingestellt werden wie sich das aneinander kleben der Bilder verhält.

repeat

Das Hintergrundbild wird horizontal und vertikal wiederholt.

div {
  background-repeat: repeat; 
}

no-repeat

Das Hintergrundbild wird nicht wiederholt.

div {
  background-repeat: no-repeat;
}

repeat-x

Das Hintergrundbild wird nur horizontal wiederholt.

div {
  background-repeat: repeat-x;
}

repeat-y

Das Hintergrundbild wird nur vertikal wiederholt.

div {
  background-repeat: repeat-y;
}

round

Das Hintergrundbild wird nur so oft wiederholt wie es reinpasst und wird in der Größe gestreckt.

div {
  background-repeat: round;
}

space

Das Hintergrundbild wird nur so oft wiederholt wie es reinpasst und es wird Leerraum zwischen den Bildern eingebaut.

div {
  background-repeat: space;
}

background-position

Mit der Positionsangabe kann das Hintergrundbild verschoben werden, sprich der Focus vom Bild wird damit gesetzt.

Textangaben

Es gibt 9 Kombinationen, auf der horizontalen left, center, bottom und auf der vertikalen top, center, bottom.

zentriert

Bei einem einfachen center wird das Bild horizontal und vertikal zentriert.

div {
  background-position: center;
}

zentriert oben

Bei center top wird das Hintergrundbild mittig oben angezeigt.

div {
  background-position: center top;
}

zentriert unten

Bei center bottom wird das Hintergrundbild mittig unten angezeigt.

div {
  background-position: center bottom;
}

links zentriert

Bei left center wird das Hintergrundbild links in der Mitte angezeigt.

div {
  background-position: left center;
}

rechts zentriert

Bei right center wird das Hintergrundbild rechts in der Mitte angezeigt.

div {
  background-position: right center;
}

rechts unten

Bei left bottom wird das Hintergrundbild rechts in der Mitte angezeigt.

div {
  background-position: right bottom;
}

Dies sollte als Beispiel reichen, es kann natürlich in jede Ecke geschoben werden.

Pixelangaben

Die Pixel werden immer von der oberen linken Ecke angegeben.

150px

150px von oben und 150px von links.

div {
  background-position: 150px;
}

100px 50px

50px von oben und 100px von links.

div {
  background-position: 100px 50px;
}

50px 100px

100px von oben und 50px von links.

div {
  background-position: 50px 100px;
}

Prozentangaben

Bei der Position können auch Prozentangaben verwendet werden. Von -100% bis 100% sind valide angaben, aber es können auch höhere und niedrigere Angaben gemacht werden.

25% 25%

25% von oben und 25% von links.

div {
  background-position: 25% 25%;
}

25% 75%

75% von oben und 25% von links.

div {
  background-position: 25% 75%;
}

75% 25%

25% von oben und 75% von links.

div {
  background-position: 75% 25%;
}

75% 75%

75% von oben und 75% von links.

div {
  background-position: 75% 75%;
}

background-size

Mit der size Angabe kann die Größe des Bildes skaliert werden.

Auto, cover, contain

100% auto

100% Breite des DIV Containers und das Seitenverhältnis wird beibehalten.

div {
  background-size: 100% auto;
}

auto 100%

100% Höhe des DIV Containers und das Höhenverhältnis wird beibehalten.

div {
  background-size: auto 100%;
}

cover

Es wird der komplette DIV Container ausgefüllt und das Seitenverhältnis bleibt erhalten. Es skaliert automatisch die höhe auf 100% oder die Breite auf 100%.

div {
  background-size: cover;
}

contain

Setzt das Hintergrundbild so größ wie möglich ein, sodas es aber noch komplett zu sehen ist.

div {
  background-size: contain;
}

Prozentangaben

100% 50%

100% Breite und 50% breite des DIV Containers.

div {
  background-size: 100% 50%;
}

100% 100%

100% Breite und 100% breite des DIV Containers.

div {
  background-size: 100% 100%;
}

100% 150%

100% Breite und 150% breite des DIV Containers.

div {
  background-size: 100% 150%;
}

50% 100%

50% Breite und 100% breite des DIV Containers.

div {
  background-size: 50% 100%;
}

150% 100%

150% Breite und 100% breite des DIV Containers.

div {
  background-size: 150% 100%;
}
Werbung