Background Properties - Boxing with CSS, Part I: The Theory - HTML with Style

Boxing with CSS, Part I: The Theory

Background Properties

There are several properties that control the appearance of the background of an element's box. There is also a shorthand property that brings them all together.

The background color is simply a color, specified in any of the color units discussed in Tutorial 8, or it can be set to transparent, which is the default. Note that background colors do not inherit, but children of an element with a background color will have a background color of transparent as default, which means that the background color of the parent element will "shine through." So, like margin and padding properties, even though background properties do not inherit, they usually have an effect on the element's children.

Remember, when setting the background-color property to always set the color property in order to override any default setings in the user style sheet or the user agent style sheet. Otherwise you might have very similar colors for foreground and background, making the element effectively invisible.

BODY {
 background-color: white;
 color: black;
}
H1 {
 background-color: #E0DD06;
}
ADDRESS {
 background-color: rgb(6, 224, 6);
 color: rgb(100%, 100%, 100%);
}

The background-image property is used to set an image as the background for an element. The image is given through a URI value. The user agent is supposed to locate the image from the specified URI and display it behind the element.

DIV.funny {
 background-color: white;
 background-image: url("http://www.acme.com/images/funnyface.gif");
}

The background-repeat property controls whether the background image is tiled to fill the background of the element. If the value is repeat, then the image is tiled. If it is repeat-x, then it is tiled only horizontally. If the value is repeat-y, then it is tiled only vertically. If it is no-repeat, then it is not repeated at all.

DIV.funny {
 background-color: white;
 background-image: url("http://www.acme.com/images/funnyface.gif");
 background-repeat: repeat-y;
}

This property determines whether the background will be scrolled together with the element on the screen, or if it will remain fixed relative to the screen. scroll indicates that it should be scrolled, and fixed indicates that it should not scroll.

DIV.funny {
 background-color: white;
 background-image: url("http://www.acme.com/images/funnyface.gif");
 background-repeat: repeat-y;
 background-attachment: fixed;
}

Note that Netscape Navigator always scrolls the background, and ignores the background-attachment property.

The background-position property sets the offset that the initial background image (before it is tiled according to the background-repeat property) has from the edge of the padding area of the element. It accepts a horizontal and a vertical position. The vertical position may be omitted, in which case it is assumed to be 0%. The positions can be percentages, which indicate how far along the padding edge of the element the image is placed (so 30% 75% means put it 30% of the way to the left and 75% of the way down). They can also be length values, which indicate the distance from the upper left hand corner of the padding area. The horizontal position may also be right, left, or center, which correspond to 100%, 0% and 50% respectively, and the vertical position may be top, bottom, or center, which correspond to 0%, 100% and 50% respectively.

DIV.funny {
 background-color: white;
 background-image: url("http://www.acme.com/images/funnyface.gif");
 background-repeat: repeat-y;
 background-attachment: fixed;
 background-position: left 2cm;
}

Note that Netscape Navigator ignores the background-position property. Internet Explorer 4.0 does recognize it, but continues tiling only to the left, bottom or both of the initial image according to the setting of the background-repeat property, instead of tiling in both horizontal or both vertical directions as it is supposed to.

The background property is an easy way to simply put all of the background properties into one declaration. The following sets the HTML with Style Logo as the background for the BODY element, sets the background color to white (for the area that the logo doesn't cover, and also in case the browser cannot display the image for some reason), says that the background should be fixed and tiled horizontally starting from the middle of the padding area.

BODY {
 background: url("../art/hwslogo.gif") white fixed repeat-x 50% 50%;
 color: black;
}

Here's our familiar Acme home page with this style:

That's all for this time, dear readers. I have yet to tell you about border properties, but their use lies at the heart of most of the implementation problems of the Big Two, so I will go into them in greater depth in Tutorial 10. Our foray into the world of the CSS visual formatting model will be continued next time as we explore the darker side of the issue: the implementations. There are no exercises or examples for this tutorial as you have learned little that can be put to immediate use. But understanding the basics behind the CSS visual formatting model is essential before we explore what Microsoft and Netscape have decided to make of it.

Produced by Stephanos Piperoglou

All Rights Reserved. Legal Notices.

URL: https://www.webreference.com/html//
Created: Nov 18, 1998
Revised: Nov 18, 1998