Toxiclab.org

Background properties

22.12.2005, 17:40
Submited in: Css & XHTML | Total Views: 27592

Css properties allows you to specify the background of an element. Backgrounds may be colors or images.

Background properties are: back-ground, background-color, background-image, background-repeat, back-ground-attachment, background-position.

background

Value: background-color, background-image, back ground-repeat, background-attachment, back-ground-position, inherit
Applies to: all elements

The background property is a shorthand property for setting the individual background properties.

Example:
BODY { background: red }
P { background: url("bg.png") #cecece 50% repeat fixed }



background-color

Value: color, transparent, inherit
Applies to: all elements

Example:

table { background-color: #cecece }


background-image

Value: url, none, inherit
Applies to: all elements

When setting a back-ground image, you should also specify a background color that will be used when the image is unavailable.

Example:
.title { background-image: url("images/title.gif") }
div { background-image: none }


background-repeat

Value: repeat, repeat-x, repeat-y, no-repeat, inherit
Applies to: all elements

This property specifies whether the image is repeated , and how.

Example:
.content {
 background: white url("bg.gif");
 background-repeat: repeat-x;
 background-position: center;
 }


background-attachment

Value: scroll, fixed, inherit
Applies to: all elements

Example:
.content {
 background: white url("bg.gif");
 background-repeat: repeat-x;
 background-attachment: fixed;
 }



background-position

Value: percentage, length, top  center  bottom left center right, inherit
Applies to: block-level and replaced elements

Example:

BODY { background: url("logo.jpeg") right top } /* 100% 0% */

Resource: World Wide Web Consortium

Are you a website owner?
Click here to register and submit your tutorials!

Browse by category


Most popular tutorials