Background properties in Css & XHTML

Background properties

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

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!