Achtung: URL-Angabe der verwendeten Grafik relativ zur CSS-Datei (NICHT zur HTML-Datei…)

Das verwendete Gif – von Squidfingers

CSS

/* Hintergrund – endlos */
div {
    background-image:url(p/img_5.gif);
}

CSS

/* Hintergrund – waagrecht */
div {
    height: 10em;

    background-image:url(p/img_5.gif);

    /* nur waagrecht */
    background-repeat: repeat-x;

    /* 
    Achtung: 2 Werte! 
    1. Wert = X-Position
    2. Wert = Y-Position
    */
    background-position: 0 50%;

    /* alternative Kurzschreibweise */
    background: url(p/img_5.gif) 0 50% repeat-x;
}

CSS

/* Hintergrund – senkrecht */
div {
    background-image:url(p/img_5.gif);

    /* nur senkrecht */
    background-repeat: repeat-y;

    /* 
    Achtung: 2 Werte! 
    1. Wert = X-Position
    2. Wert = Y-Position
    */
    background-position: 230px 0;

    /* alternative Kurzschreibweise */
    background: url(p/img_5.gif) 230px 0 repeat-y;
}

Hintergrund-Einzelbilder

Damit lassen sich sehr schön z.b. erklärende Icons einbinden…

CSS

p {
    background-image:url(p/zipped.gif);

    /* keine Wiederholung */
    background-repeat: no-repeat;

    /* Positionierung */
    background-position: 0 40%;

    /* hattet Ihr noch nicht – kommt in nächster Vorlesung */
    padding-left:20px;
}