- Posted by lio on October 5, 2008
Examples
Set the background color
This example demonstrates how to set the background color for an element.
<html>
<head>
<style type="text/css">
body {background-color: yellow}
h1 {background-color: #00ff00}
h2 {background-color: transparent}
p {background-color: rgb(250,0,255)}
</style>
</head>
<body>
<h1>This is header 1</h1>
<h2>This is header 2</h2>
<p>This is a paragraph</p>
</body>
</html>
|
Set an image as the background
This example demonstrates how to set an image as the background.
<html>
<head>
<style type="text/css">
body
{
background-image:
url('bgdesert.jpg')
}
</style>
</head>
<body>
</body>
</html>
|
CSS Background Properties
The CSS background properties allow you to control the background color of an element, set an image as the background, repeat a background image vertically or horizontally, and position an image on a page.
Browser support: IE: Internet Explorer, F: Firefox, N: Netscape.
W3C: The number in the "W3C" column indicates in which CSS recommendation the property is defined (CSS1 or CSS2).
| Property |
Description |
Values |
IE |
F |
N |
W3C |
| background |
A shorthand property for setting all background properties in one declaration |
background-color
background-image
background-repeat background-attachment background-position |
4 |
1 |
6 |
1 |
| background-attachment |
Sets whether a background image is fixed or scrolls with the rest of the page |
scroll
fixed |
4 |
1 |
6 |
1 |
| background-color |
Sets the background color of an element |
color-rgb
color-hex
color-name
transparent |
4 |
1 |
4 |
1 |
| background-image |
Sets an image as the background |
url(URL)
none |
4 |
1 |
4 |
1 |
| background-position |
Sets the starting position of a background image |
top left
top center
top right
center left
center center
center right
bottom left
bottom center
bottom right
x% y%
xpos ypos |
4 |
1 |
6 |
1 |
| background-repeat |
Sets if/how a background image will be repeated |
repeat
repeat-x
repeat-y
no-repeat |
4 |
1 |
4 |
1 |