O'Reilly logo

Cascading Style Sheets: The Definitive Guide by Eric A. Meyer

Stay ahead with the world's most comprehensive technology and business learning platform.

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, tutorials, and more.

Start Free Trial

No credit card required

Complex Backgrounds

Having covered the basics of foreground and background colors, we turn now to the subject of background images. In HTML, it’s possible to associate an image with the background of the document by using the BODY attribute BACKGROUND:

<BODY BACKGROUND="bg23.gif">

This will cause a user agent to load the file bg23.gif and then “tile” it in the document background, repeating it in both the horizontal and vertical directions to fill up the entire background of the document, as shown in Figure 6-22.

Applying a background image in HTML

Figure 6-22. Applying a background image in HTML

This effect can be duplicated in CSS, but CSS contains a great deal more than simple tiling of background images. We’ll start with the basics and then work our way up.

Background Images

In order to get an image into the background in the first place, the property background-image is used.

The default value of none means about what you’d expect: no image is placed in the background. If you want a background image, then you need only give this property a URL value:

BODY {background-image: url(bg23.gif);}

Due to the default values of other background properties, this will cause the image bg23.gif to be tiled in the document’s background, as shown in Figure 6-22.

It’s usually a good idea to specify a background color to go along with your background ...

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, interactive tutorials, and more.

Start Free Trial

No credit card required