CSS background-color
Description
Use the background-color property to change an html elements background color!
The default value is transparent - so the color or background color of the element behind will show by default.
background-color: name;
or
background-color: #rrggbb;
or
background-color: rgb(%,%,%);
or
background-color: transparent;
or
background-color: inherit;
See also: background-image, background-position, background-attachment, background-repeat
Examples for css background-color
Example 1:
test text test text test text test text
<style>
#test { background-color: red; }
</style>
<div id="test">test text test text test text test text</div>Give it a go!
Example 2:
This examples shows the transparent value. The outer div has background-color of blue and the inner div has transparent setting so the blue is seen in the inner div too:
above test 2
test text test text test text test text
below test 2
<style>
#outerdiv { background-color: blue; }
#test2 { background-color: transparent; }
</style>
<div id="outerdiv">
<div id="test2">test text test text test text test text</div>
</div>Give it a go!
Values for <background>
| background-color |
red
#ff0000
rgb(100%,0%,0%)
transparent |
Set the background color of the element. |
| background-image |
url(URL) e.g. url(images/image1.jpg)
none |
Specifies an image to display in the background of the element |
| background-repeat |
repeat
repeat-x
repeat-y
no-repeat |
Specifies the repeat style of the background image. repeat-x causes tiling to the left and the right, repeat-y causes tiling up and down |
| background-attachment |
scroll
fixed |
Specifies if background image scrolls or is fixed when the page is scrolled |
background-position
(note two values one for x and one for y |
For y
%|px|top|center|bottom
For x:
%|px|left|center|right
e.g. top left
e.g. 50% right
e.g. 50% 20px |
Specifies the position of the background image. Or if tiling then indicates the origin of the tiling |