complete css guide
Background properties
Background properties affect how the background of an element appears. Unlike with standard HTML, with CSS any element can have a background image or color. Background images can 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. In short, CSS goes far beyond the background attributes of HTML.
The background properties are
- background-color
- background-image
- background-attachment
- background-repeat
- background-position
- background
background-color
Browser support
Get browser support information for background-color in the downloadable version of this guide or our browser support tables.
What it does
background-color, not surprisingly, specifies the color of the background of an element. Any element can be given a background color with CSS.
Possible values
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 ensures that whatever is behind an element is visible, rather than obscured by the background of the element. This is particularly useful with positioned elements, which might overlap two or more elements.
Default values
If no background-color is specified, then the element has a transparent background.
Is it inherited?
background-color is not inherited by an element from its parent. However, not specifying a background-color, or setting it to transparent ensures that the color of the element or elements behind shines through.
Hints and suggestions
It is recommended that if you set a background-color for an element, you should also set its color. This ensures that there will not be an illegible clash between a text color set by user preferences against a background color set in your style sheet.
As mentioned in the Browser support notes below, Netscape 4.x had an irritating bug which meant that the background color did not completely fill the entire box of the element, only its content. So for example, if you set a background-color for headings, only the individual words in the heading would be backed by color, leaving unsightly gaps in between. There is a simple workaround for this though which needn't affect how the element will appear in any other browser. Give the selector for this element both a width and a border. You can use a width of auto if you don't want it to be any wider than its content. Likewise you can give a border-style of none, if you don't want the element to actually have a border. The problem in Netscape 4 should be cleared up by doing this.
background-image
Browser support
Get browser support information for background-image in the downloadable version of this guide or our browser support tables.
What it does
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.
Possible values
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.
Default values
If no background-image is specified, an element has a background-image of none.
Is it inherited?
background-image is not inherited from the parent element. Which makes a lot of sense if you think about it.
Hints and suggestions
The URL 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, Navigator 4 does not work correctly, treating the URL relative to the HTML document. This is fine if the style sheet is embedded, but doing this defeats several of the major purposes of style sheets.
There's a simple solution though if you do choose to use a linked style sheet: in the style sheet specify the location of the background image using an absolute URL.
It is also recommended that you specify a background-color as well as a background-image. This ensures that if the image is unavailable (or images are off by the user), the foreground text color does not blend with the background, and text remains legible.
background-attachment
Browser support
Detailed browser support information for background-attachment can be found in the full downloadable version of this guide, or in our CSS Browser Support Tables.
What it does
With traditional background images in the body of HTML documents, when the page is scrolled, the image scrolls too. With background images and CSS, you can specify that the background image should not scroll, but rather remain fixed as the page scrolls.
Possible values
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.
Default values
If no background-attachment value is specified, the default value is scroll, which reproduces the behavior of major browsers.
Is it inherited?
background-attachment is not inherited.
Hints and suggestions
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 will become important.
background-repeat
Browser support
Get browser support information for background-repeat in the downloadable version of this guide or our browser support tables.
What it does
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 (that is repeat the image horizontally and vertically).
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.
Possible values
background-repeat can take the following values
repeatrepeat-xrepeat-yno-repeat
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 makes the image appear once and not tile either horizontally or vertically.
Default values
If no background-repeat value is set, the default value of this property is repeat. This reproduces the effect of the traditional background image.
Is it inherited?
background-repeat is not inherited from the parent element.
Hints and suggestions
Elements other than the body can be given a background image, and so may also have a background-repeat.
background-position
Browser support
Get browser support information for background-position in the downloadable version of this guide or our browser support tables.
What it does
With a 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 can specify where a background image is placed using the background-position property.
If the image repeats (horizontally, vertically or both) then it repeats from this location. If there is a single image, it is placed using the background-position property.
Possible values
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, length values or keywords
- individual keywords
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.
If you are wondering quite how this differs from percentage values, see the emphasized 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
topleftcenterrightbottom
Rather than go into laborious detail, here is the explanation from the recommendation
- '
top left' and 'left top' both mean the same as '0% 0%'. - '
top', 'top center' and 'center top' mean the same as '50% 0%'. - '
right top' and 'top right' mean the same as '100% 0%'. - '
left', 'left center' and 'center left' mean the same as '0% 50%'. - '
center' and 'center center' mean the same as '50% 50%'. - '
right', 'right center' and 'center right' mean the same as '100% 50%'. - '
bottom left' and 'left bottom' mean the same as '0% 100%'. - '
bottom', 'bottom center' and 'center bottom' mean the same as '50% 100%'. - '
bottom right' and 'right bottom' mean the same as '100% 100%'.
Default values
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.
Is it inherited?
An element does not inherit the background-position of its parent.
Hints and suggestions
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 replaced elements can have this property. For more on the different types of element, see Types of Element.
background
Browser support
Get browser support information for background in the downloadable version of this guide or our browser support tables.
background is a shorthand property that lets 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/gifs/bg1.gif) fixed no-repeat top center
is the equivalent of
background-image:url(http://www.westciv.com/gifs/bg1.gif);
background-attachment: fixed;
background-repeat: no-repeat;
background-position: top center;