CSS HOW-TOCSS TemplatesLink listContactSitemap

09 Background images

The background of an element can be a color or an image. CSS allows you to repeat the background image vertically or horinzontally, or appear just once. Backgrounds are not inherited.

background-image (image)

background-image:url(blumen.gif); 
Values: none, url() 

Example: background 01

background-repeat (Repeat the background image)

background-image:url(blumen.gif);
background-repeat:repeat-y 

Example: background 02

background-image:urlblumen.gif);
background-repeat:repeat-x;
Values: background-repeat: no-repeat, repeat, repeat-x, repeat-y

Example: background 03

background-attachment (Watermark effect)

body {
background-color: #f5f5f5;
background-image:url(blumen.gif);
background-repeat:no-repeat;
background-attachment:fixed;
background-position: right bottom;
} 
Values: background-attachment: fixed, scroll
Values: background-position: left, center, right, top,bottom 

Example: background 04