HTML and CSS Reference
In-Depth Information
Can I use both a background-color and a background-image attribute
on the body selector?
Yes, you can! The background color (specified by the background-color property) will dis-
play first. Then the image specified as the Web page background will be loaded and tiled
across the page. It's a good idea to choose a background color of a hue similar to the major
color in your Web page background image. By coding both a background color and a back-
ground image you provide your visitor with a more pleasing visual experience. If the back-
ground image does not load for some reason, the page background will still have the expected
contrast with your text color. If the background image is smaller than the Web browser window
and the Web page is configured with CSS to not automatically tile (repeat), the page back-
ground color will display in areas not covered by the background image. The CSS for a page
with both a background color and a background image is as follows:
body { background-color: #cccccc;
background-image: url(mybackground.gif);
You may think that a graphic created to be the background of a Web page would always be
about the size of a browser window. This can be done; however, often the background image
is actually much smaller than the typical browser window. The shape of a background image is
usually either a long, thin rectangle or a small rectangular block. Unless otherwise specified in a
style rule, Web browsers repeat, or tile, these images to cover the page background. The
images have small file sizes so that they download as quickly as possible. Figure 4.18 shows a
long, thin rectangular image that will repeat down the page. The Web page shown in Figure
4.19 uses a small rectangular image that is repeated or tiled on the page. In each of these
cases, the small background image has the effect of a much larger image that fills the screen.
Figure 4.18
A long, thin background image tiles down the page
Figure 4.19
A small rectangular background is repeated to fill the Web
page window
Search WWH ::

Custom Search