Designating Background Images Using CSS

HTML allowed us to place an image as the background for our documents. CSS allows this as well, with the aptly named background-image style element.

The background-image element can be applied to most HTML elements, including divs, tables, paragraphs, and headings. We can also designate a default background-image for our entire document.

Let's take a look at some CSS background image style settings.

p	{background-image: url(http://www.domainstobuy.com/img/domainstobuy.gif);}
td	{background-image: url(domainstobuy.gif);}

Notice the slightly different format of the syntax of background-image styles. Rather than just designating the URL of the image after the background-image command, we must place the word url and then add the url of our image in ().

You may also notice that, as with HTML, images in CSS may be called either by an absolute URL (http://www.domainstobuy.com/img/domainstobuy.gif) or a relative URL (domainstobuy.gif). The relative URL may only be used for images placed in the same route directory as your style sheet.

As with all usage of images as a background for your site, choose images that are not distracting, that fit well with the general look of your site, and choose a font that will be readable when placed over your image.

Good practice tels us to always include a background color when using a background image. That way visitors' who use browsers which do not display images will still view our document comfortably. For example, suppose our paragraphs were set with a dark image in the background, like a very stormy sky. Because of the dark image, our font was set to white. Users whose browsers didn't display images would see a white background with white text and not be able to read our document. Designating a background-color in addition to the graphic would allow us to ensure readability with all browsers.

If you do not remember how to format background-color commands you may reread the tutorial.

You should now be able to specify background-images within CSS by calling both relative and absolute URLs.