Steuerung des Hintergrundbildes über Positionsangaben

Nur mit Hilfe eines einzigen Hintergrundbildes hat man die Möglichkeit ein Bild für den Betrachter immer anders erscheinen zu lassen.
Der große Vorteil von dieser Technik ist, dass man nur ein Bild erstellen und hinterlegen und daher auch nur ein Bild geladen werden muss. Man spart sich Zeit für die Erstellung und außerdem auch Ladezeit.

 

Definition in css

div.backgroundposition.left {
background:url(background-position.jpg) left top no-repeat;
width:150px;
height:75px;
}


div.backgroundposition.right {
background:url(background-position.jpg) right bottom no-repeat;
width:150px;
height:75px;
}


div.backgroundposition.center {
background:url(background-position.jpg) center center no-repeat;
width:150px;
height:75px;
}

Und so schaut´s aus:

Ausgangsbild
Background Position Rechts unten
Background Position Links unten
Background Position Mittig