Background Properties





PropertyDescriptionPossible ValuesExamples
background-attachmentDeclares the attachment of a background image (to scroll with the page content or be in a fixed position).
fixed
scroll
div { background-attachment:fixed; }

div { background-attachment:scroll; }

background-colorDeclares the background color.Valid color names, RGB values, hexidecimal notation.
div { background-color:green; }

div { color:#00FF00; }

background-imageDeclares the background image of an element.URL values.
div { background-image:url(images/img.jpg); }

body { background-image:url(img.jpg); }

background-positionDeclares the position of a background image.Lengths or percentages for the x and y positions, or one of the predefined values:

top left
top center
top right
center left
center center
center right
bottom left
bottom center
bottom right

div { background-position:10px 50px; }

div { background-position:bottom right; }

background-repeatDeclares how and/or if a background image repeats.
repeat
repeat-x
repeat-y
no-repeat
div { background-repeat:repeat-x; }

div { background-repeat:no-repeat; }

backgroundUsed as a shorthand property to set all the background properties at once.Separate values by a space in the following order (those that are not defined will use inherited or default initial values):

background-color
background-image
background-repeat
background-attachment
background-position

div { background:green url(image.jpg) no-repeat fixed center center; }

div { background:url(image.jpg) fixed; }