CSS background tutorials

Using Cascading Style Sheets

People often ask me how to put an image like a drop shadow in the background of a page without relying too heavily on HTML. I always give the answer – I use CSS.

CSS is such an incredible language; both easy to learn and time-saving. CSS will allow you to do things with text, images and standard HTML code that you cannot do with HTML alone. One feature that I think you find useful is the use of the background-image property within CSS.

A background-image for page back-drops

If I wanted to use an image as a background to my web page, of course, I could always specify this in HTML:

<body background=”/images/background.gif”>

Good stuff! However, I can gain little control over how the image will now display itself – how and in which direction I’d like to see it repeat or tile.

Instead of relying too heavily on HTML to get the job done, I will now show you how to achieve a background image and gain greater control over its formatting using CSS.

Example 1

<style type=”text/css”>
body
{
background-image: url(“images/background.gif”)
}
</style>

This will put an image in the background of the body of your page. Now let’s look at adding a little more control to the image’s appearance.

Example 2

<style type=”text/css”>
body {
background-image: url(“images/background.gif”);
background-repeat: repeat-y;
background-position: center;
}
</style>

Now I have included the use of the ‘background-repeat’ and ‘background-position’ properties. My image will now repeat or tile in the ‘repeat-y’ direction (y = vertical, x = horizontal), and the image will remain central to the body of my page using the ‘background-position: center’ property and value.