CoderTools Web site

CSS background-color


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;
        background-color: #rrggbb;
        background-color: rgb(%,%,%);
        background-color: transparent;
        background-color: inherit;
See also: background-image, background-position, background-attachment, background-repeat
HTML & CSS Editor with FTP / FTPS

Examples for css background-color

Example 1:

test text test text test text test text
        #test { background-color: red; }

    <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
        #outerdiv { background-color: blue; }
        #test2 { background-color: transparent; }
    <div id="outerdiv">
        <div id="test2">test text test text test text test text</div>
    </div>Give it a go!

Values for <background>

Name Values Description
background-color red
Set the background color of the element.
background-image url(URL) e.g. url(images/image1.jpg)
Specifies an image to display in the background of the element
background-repeat 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
Specifies if background image scrolls or is fixed when the page is scrolled

(note two values one for x and one for y
For y
For x:

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

TotalEdit Now Completely Free

CoderTools TotalEdit - The Free Text Editor

A powerful editor and notepad replacement TotalEdit makes it easier to complete your file editing and software development tasks. TotalEdit is FREE for commercial and non-commercial purposes (its freeware).

6/23/2017 5:33:56 PM
Terms Of Use | Privacy Statement | Copyright 2006-2015 © Independence Software LLP