Dieses Wissen ist auch im Zusammenhang mit Animation sehr wichtig. Siehe dazu auch mein Beispiel buttonEffekt.html
div {
border: 1px solid;
background-image: url("img/beige.gif");
width: 200px;
height: 30px;
background-repeat: no-repeat;
}
Allen div Elementen wurde ein einfarbiges Hintergrundbild zugewiesen. Die Divs haben alle die Größe 200px und 30px. Das ist wichtig, da ich die meisten Hintergrundbilder mittels background-size: 100% 100%; an diese Größe anpasse. An mehreren Beispielen kann man genau sehen, wie sich die Angaben für die Positionierungen auswirken. Der erste Wert steht für die horizontale Positionierung, der zweite für die vertikale.
Ein Hintergrundbild, welches in 0 0 liegt, liegt mit seiner linken oberen Ecke, in der linken oberen Ecke des Html Elements oder Selektors.
#back1 {
background-size: 100% 100%;
}
#back2 {
background-size: 100% 100%;
background-position: 0px 0px;
}
#back3 {
background-size: 100% 100%;
background-position: 100px 15px;
}
#back4 {
background-size: 100% 100%;
background-position: 180px;
}
#back5 {
background-size: 100% 100%;
background-position: -180px;
}
#back6 {
background-size: 100% 100%;
background-position: 10px;
}
#back7 {
background-size: 100% 100%;
background-position: 0px 10px;
}
#back8 {
background-size: 100% 100%;
background-position: 0px -20px;
}
#back9 {
background-size: 50% 50%;
background-position: 0px 0px;
}
#back10 {
background-size: 50% 50%;
background-position: 0%;
}
Etwas merkwürdig verhält es sich bei dem letzten Beispiel, wo nur der horizontale Wert vergeben ist.