Background
|
Background color
|
|
The style for this td is:
background-color: #ffcc33;
|
Background Image
|
|
The style for this td is:
style="background-image: url('images/bluegray.gif');"
Notice the punctuation. The url is followed by the image file location,
within parentheses and quotes.
I used single quotes because the whole style is within double quotes.
Single quotes will not be confused with the double quotes
when the browser reads the style.
The default value for the background-repeat is repeat .
The default value for the background-attachment is scroll .
|
Background repeat-x
|
|
The style for this td is:
background-image: url('images/bluegray.gif'); background-repeat: repeat-x;
repeat-x only repeats across.
We could have used repeat-y .
repeat-y only repeats down.
|
Background no-repeat
|
|
The style for this td is:
background-image: url('images/bluegray.gif'); background-repeat: no-repeat;
|
Background position
|
|
The style for this td is:
background-image: url('images/bluegray.gif'); background-repeat: no-repeat; background-position: 10px center; background-color: white;
With background-position , the horizontal offset from the left is given first,
then the vertical position down from the top.
Possible values are:
a fixed length distance or a percentage
The horizontal value can also be:
left center right
The vertical value can also be:
top center bottom
Note that yes, Virginia, there is a center value for both horizontal and vertical position
of a background image.
|
Background attachment
|
|
The example shown in the link to the left has:
background-attachment: fixed;
The background image is specified for the body element.
Notice that the text is almost impossible to read with the strong image patterns.
It is usually best to have a background image that is very light everywhere.
Notice that in this example, the text scrolls up or down, but the image postion is fixed.
You could make the background scroll up or down with the text by using:
background-attachment: scroll;
|
Background
|
|
The style for this td is:
background: url('images/bluegray.gif') no-repeat 10px center white;
This is the same as the background position example, given above.
You can combine all the background values with the background property.
The horizontal offset must be before the vertical offset; other than that, there are no order restrictions.
|
|
|