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.
