• B
    • background-attachmentbackground-positionBox-Shadow

    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