.dmg/Shareware World/Comms & Internet/Style Master 1.2 ppc/css_tutorial/gifs/navigation/brought_to_you.gif)
Background properties affect how the background of an element can appears. Unlike with standard HTML, any element can have a background image or color. Background images can now repeat vertically, horizontally, both (the traditional tiling effect of background images in the BODY of HTML pages) or not at all (enabling easy "watermark" effects.) The way the background changes when you scroll a page can also be determined with CSS. A background image can either scroll while the page scrolls (traditional HTML appearance) or remain fixed while the text scrolls.
The background properties are
background-color, surprisingly, specifies the color of the background of am element. Any element can be given a background color with CSS.
background-color is specified as either a color value, or as transparent.
For more on color values, see our section on values.
a background-color of transparent ensured that whatever is behind an element is visible, rather than obscured by the background of the element.
If not background-color is specified, then the element has a transparent background.
background-color is not inherited by an element from its parent.
Quite straightforward really, with nothing particular to keep in mind.
With traditional HTML based web pages, only an entire page can have a background image. Some browsers allow some elements, for example table cells, to have background images, but this is non standard.
CSS lets any element have a background image. As we will shortly see, the background image can be used in more ways than the simple tiled backgrounds of traditional web pages.
background images are specified as either a URL of the image to be used for the background, or by the keyword none.
For more detail on URLs see the section in the discussion on values.
If no background-image is specified, an element has a background-image of none.
background-images are not inherited from the parent element.
The URL in for the background-image is relative to the style sheet, not to the HTML document. While this ought to be clear when you think about it, some versions of a major browser did not work correctly, treating the URL relative to the HTML document. This is fine if the style sheet is embedded, but defeats the purpose of style sheets if the style sheet is linked to the HTML document.
With traditional background images in the body of HTML documents, when the page was scrolled, the image scrolled too. With background images and CSS, you can specify that the background image should not scroll, but rather remain fixed as the page scrolls.
background-attachment can take one of two values, scroll and fixed.
scroll specifies that the background should scroll as the page scrolls (this is the current behavior of browsers when a page with a background image scrolls)
fixed specifies that the background image should not move as the page scrolls. Effectively the foreground text, images and other content scroll over a stationary background.
If no background-attachment value is specified, the default value is scroll, which reproduces the behavior of major browsers.
background-attachment is not inherited.
In practice, only body elements are affected by the background-attachment property. If and when the overflow property is well supported by major browsers, the background-attachment property of those elements may become important.
With the traditional background image associated with the body of a page, where the background image is smaller than the width and or height of the page, browsers "tile" the image.
CSS allows you to specify whether and how a browser treats background images when the width and height of the image is less than that of the element.
background-repeat can take the following values
repeat has the effect of tiling the background image horizontally and vertically like the traditional background image in web pages.
repeat-x tiles an image horizontally, but not vertically.
repeat-y tiles the image vertically but not horizontally.
no-repeat ensures that the image appears once and does not tile either horizontally or vertically.
If not background-repeat value is set, the default value of this property is repeat. this reproduces the effect of the traditional background image.
background-repeat is not inherited from the parent element.
Elements other than the body can be given a background image, and so may also have a background-repeat.
With the traditional HTML based background image, the image is placed in the top left hand corner of the page, and tiles from there.
With CSS, we now have control over where a background image is placed.
If the image repeats (horizontally, vertically or both) then it repeats from here. If there is a single image, it is placed using the background-position property.
background position is among the more complicated properties. There are several ways of specifying an image position. Positions may be specified using
Pairs of Percentage Values
When a position is specified using a pair of percentage values (for example,
background-position: 0% 0%) the first value relates to the position
of the top of the image, while the second relates to the position of the left
of the image. The actual mechanism is best explained with examples.
Suppose we have the following property: (background-position: 15% 25%).
This means that the point 15% from the top of the image is aligned
with the point 15% from the top of the element. The point 25% from the left
of the image is aligned with the point 25% from the left of the element.
This is a little tricky. There are more straightforward ways of specifying the position.
Pairs of Length Values
When a position is specified using a pair of length values, (for example background-position
20px 20px) the first value specifies the position of the top of the image
relative to the element, while the second value specifies the position of the
left of the image relative to the element.
The way in which this works is somewhat simpler than percentages. Again, let's look at an example.
With the following property (background-position 20px 30px) the
top of the image is positioned 20px from the top of the element for which
it is a background, while the left of the image is placed 30px from
the left of the element for which it is a background.
If you are wondering quite how this differs from percentage values, see the emphasizes text in this part, and compare it with the emphasized text in the part above which describes how percentage values work
In our section on values we cover exactly what lengths are in detail.
Pairs of Keywords and Individual Keywords
Rather than relying on length values, or percentage values, keyword values can be used. Keywords have a similar effect to percentages.
The keywords which can be used to specify position are
Rather than go into laborious detail, here is the explanation from the recommendation
If no background-position is specified, this is the equivalent of a background-position of 0% 0%, that is, the top left of the background image is placed in the top left of the element.
An element does not inherit the background-position of its parent.
The background-position property lets you create watermark effects by placing a single image in the center of an element, for example in the center of a page. It is a tricky, but powerful property.
Not every type of element can have a background-position, even though any type of element can have a background image. Only block elements and replacement elements can have this property. for more on the different types of element, see the advanced style sheets section.
background is a shorthand property that let's you set any or all background properties at once.
The background property takes exactly the same types of values as the properties described in this section. To specify more than one property using the background shorthand, the various background values are separated simply by spaces.
As a simple example, this background property
background (url(http://www.westciv.com.au/gifs/bg1.gif) fixed no-repeat
top center)
is the equivalent of
background-image:url(http://www.westciv.com.au/gifs/bg1.gif);
background-attachment: fixed;
background-repeat: no-repeat;
background-position: top center;