Allgemein

background-image: url(smiley.gif);

Größe

background-image: url(smiley.gif);

/* das Bild wird immer so skaliert, dass es die ganze Fläche füllt */
background-size: cover;
            
background-image: url(smiley.gif);

/* das Bild wird immer so skaliert, dass es immer ganz sichtbar ist */
background-size: contain;
            
background-image: url(smiley.gif);

/* das Bild wird auf 50px Breite skaliert (Seitenverhältnis wird beibhalten) */
background-size: 50px;
            
background-image: url(smiley.gif);

/* das Bild wird auf 50px Breite und 20px Höhe skaliert */
background-size: 50px 20px;
            
background-image: url(smiley.gif);

/* Prozent- statt Pixelgröße */
background-size: 50% 20%;

Bildwiederholung

background-image: url(smiley.gif);
background-size: 50px;

/* Hintergrundbild nicht wiederholen */
background-repeat: no-repeat;
            
background-image: url(smiley.gif);
background-size: 50px;

/* Hintergrundbild auf x-Achse wiederholen */
background-repeat: repeat-x;
            
background-image: url(smiley.gif);
background-size: 50px;

/* Hintergrundbild auf y-Achse wiederholen */
background-repeat: repeat-y;

Position

background-image: url(smiley.gif);
background-size: 50px;
background-repeat: no-repeat;

/* Hintergrundbild zentrieren */
background-position: center;
            
background-image: url(smiley.gif);
background-size: 50px;
background-repeat: no-repeat;

/* Hintergrundbild und rechts anzeigen */
background-position: bottom right;
            
background-image: url(smiley.gif);
background-size: 50px;
background-repeat: repeat;

/* Hintergrundbild unten rechts anzeigen */
background-position: bottom right;
            
background-image: url(smiley.gif);
background-size: 50px;
background-repeat: no-repeat;

/* Hintergrundbild bei x:50px y:50px anzeigen */
background-position: 50px 50px;

Zusätzliche Hintergrundfarbe

background-image: url(smiley.gif);
background-size: 50px;
background-repeat: no-repeat;
background-position: 50px 50px;

background-color: yellow;

Hintergrundbild für gesamte Seite

Wollt ihr die ganze Seite mit dem Hintergrund füllen, dann fügt es einfach dem Body-Tag hinzu:


body {
    background-image: url(smiley.gif);
}