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");
Wiederholung
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;
}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%;
}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%;
}