CSS Background
==============
Define the background effects of an element.
All CSS Background Properties
-----------------------------
background Sets all the background properties in one declaration
background-attachment Sets whether a background image is fixed or scrolls with the rest of the page
background-color Sets the background color of an element
background-image Sets the background image for an element
background-position Sets the starting position of a background image
background-repeat Sets how a background image will be repeated
function url() is not declared here.
Background Color
----------------
Background color of an element.
body {background-color:#b0c4de;}
h1 {background-color:#6495ed;}
p {background-color:#e0ffff;}
div {background-color:#b0c4de;}
Color is most often specified by:
HEX value - like "#ff0000"
RGB value - like "rgb(255,0,0)"
color name - like "red"
Background Image
----------------
Specifies an image to use as the background of an element.
By default, the image is repeated so it covers the entire element.
By default, the background-image property repeats an image both horizontally and vertically.
Note: When using a background image, use an image that does not disturb the text.
body
{
background-image:url('gradient2.png');
background-repeat:repeat-x;
}
body
{
background-image:url('img_tree.png');
background-repeat:no-repeat;
}
body
{
background-image:url('img_tree.png');
background-repeat:no-repeat;
background-position:right top;
}
body {background:#ffffff url('img_tree.png') no-repeat right top;}
property values are (space delimited)
background-color
background-image
background-repeat
background-attachment
background-position
It does not matter if one of the property values is missing, as long as the ones that are present are in this order.
Example 1
---------
Hello World!
text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text
Example 2
---------
The background-image is fixed. Try to scroll down the page.
The background-image is fixed. Try to scroll down the page.
The background-image is fixed. Try to scroll down the page.
The background-image is fixed. Try to scroll down the page.
The background-image is fixed. Try to scroll down the page.
The background-image is fixed. Try to scroll down the page.
The background-image is fixed. Try to scroll down the page.
The background-image is fixed. Try to scroll down the page.
The background-image is fixed. Try to scroll down the page.
The background-image is fixed. Try to scroll down the page.
The background-image is fixed. Try to scroll down the page.
The background-image is fixed. Try to scroll down the page.
The background-image is fixed. Try to scroll down the page.
The background-image is fixed. Try to scroll down the page.
The background-image is fixed. Try to scroll down the page.
If you do not see any scrollbars, try to resize the browser window.