The background of the webpage should not be really noticed by the viewer, unless the view is deliberately looking at it. Instead, the background’s purpose is to make the website — and therefore its content — more noticeable; if the background is more noticeable than the content — or, worse, makes the text hard to read — its purpose is defeated.
The most common backgrounds are colors, although images may be used as well. Remember when I mentioned CSS URIs in Chapter 20? This is their most common use.
The background properties are as follows:
- background-color
- background-image
- background-repeat
- background-position
- background-attachment
- background
The last, of course, is the shorthand property.
Background Color
Property: | background-color |
---|---|
Default value: | transparent |
Inherited: | No |
The background-color uses the color codes as explained in Chapter 20 with one addition: It also has a value called transparent
, which allows for a clear background.
Background Images
Another option for backgrounds is the image. These can be used in conjunction with background-color
.
The Background Image
Property: | background-image |
---|---|
Default value: | none |
Inherited: | No |
This property sets what image you actually use; the value is the URI of the image. Please remember: when you are using a relative URI, the path will be in relation to the stylesheet, rather than the HTML document.
Below is a stylesheet of an element with a background image.
And the result:
How The Background Is Repeated
Property: | background-repeat |
---|---|
Default value: | repeat |
Inherited: | No |
The background-repeat
attribute allows you to control how your background image repeats itself. It has the following values:
- repeat
- This will cause the background image to repeat both horizontally and vertically, covering the entire background of the element (as seen above).
- repeat-x
- This will cause the background image to repeat horizontally, but not vertically, creating a row of pictures in the background.
- repeat-y
- This will cause the background image to repeat vertically but not horizontally, creating a column of pictures in the background. Yes, this is the exact opposite of
repeat-x
- no-repeat
- This will cause the background image to appear once and once only.
Background Image Position
Property: | background-position |
---|---|
Default value: | 0% 0% (top right) |
Inherited: | No |
The property background-position
displays where the background will be. It can be set in a number of ways:
- keywords
- percentage
- length
Now you can use either one or two values for this. If only one value is specified, that is used for horizontal positioning, while the background is centered vertically (with two exceptions, both keywords).
Keywords
There are 5 keywords that set a backgrounds position:
- top
- bottom
- left
- right
- center
The values top
and bottom
are the centering exceptions I mentioned earlier: If these values are the only values for the background-position
property, the background is centered horizontally instead.
The center
value can be used for both horizontal and vertical positioning; used as the sole value, it will center the background both horizontally and vertically.
By the way, the values left
/right
and top
/bottom
may be written in any order. However, if you are using a number as well as a keyword, left
/right
should come first and the number second, or the number first and top
/bottom
second.
Numerically
In numerical positioning, the first number specifies the horizontal position, the second (if present) specifies the vertical position (if absent, the background is centered vertically). Just like in image maps, x and y coördinates come into play.
You may use negative values in this case.
Percentage
This sets the position of your background as a percentage of the width of the containing element.
Percentage | Horizontal position | Vertical position |
---|---|---|
0% | Far left | Top |
50% | Center | |
100% | Far right | Bottom |
You don’t need to stick to the above, of course. You may use any percentage you please — even values lower than 0% or higher than 100%, in which case you start moving your background out of the element altogether.
Length
This uses an actual measurement to place the background. I explained length quite thoroughly in Chapter 20, but I will explain a couple things.
- 0 (of any length) means the left and top
- If you want to put your background on the bottom or right, you need to know the element’s height and width, respectively.
- Using lengths to center a background is very unreliable.
Example Page With Centered Background
Background Image Behavior
Property: | background-attachment |
---|---|
Default value: | scroll |
Inherited: | No |
This last one controls what the background does when you scroll the page up or down. It has two values:
- scroll
- This means the background moves with the page.
- fixed
- This means the background stays put. This actually bogs down the browser, since it has to remember that the background does not move, while the rest of the page does.
Background Shorthand
Property: | background |
---|---|
Inherited: | No |
The background
property allows you to set all the above properties in a single declaration.
Please note that the two position values must be side-by-side, otherwise the browser won’t understand the declaration.
Image Rollover Effect
Remember when I said that the :hover
pseudo-class could cause an image to change if the mouse cursor were moved over the image? Here’s how you do it (because of spotty support for the pseudo-classes, it works best with the a
element):
Pretty simple, isn’t it? The display
, height
, and width
are all discussed in Chapter 25, and allows the a
element to be displayed as a block element and have the height and width of the image.