Applying a background image is easy. Say you want your website to have a nice tiled back-
ground. You can simply apply the image as a background to the body element:

       body {
         background:url(pattern.gif);
       }

Gradients are very fashionable at the moment so you may want to apply a vertical gradient
to your page instead. To do this, create a tall but narrow gradient graphic. You can then
apply this graphic to the body of the page and let it tile horizontally:

       body {
         background: #ccc url(gradient.gif) repeat-x;
       }

You can then set the dimensions of the div to be the same
as the branding image, apply it as a background, and tell it not to repeat.

#branding {
width: 700px;
height: 200px;
background:url(/images/branding.gif) no-repeat;
}

Lastly, it is possible to set the position of your background image. Say you want to add a
bullet to every headline on your site, as shown in. You could do something like
this:

         h1 {
            padding-left: 30px;
            background: url(/images/bullet.gif) no-repeat left center;
         }

h1 {
padding-left: 30px;
background: url(/images/bullet.gif) no-repeat 0 50%;
}

Comments are closed.