The background property is a shorthand
property that allows all the individual
background properties to be set in a
single declaration (including
background-color, background-image,
background-repeat,
background-attachment, and
background-position).
Using this shorthand property, we can
set the color of the background (the
background-color), and supply the URI of an image to be used on the background
at the same time. The remaining properties dictate how and where the image is
placed.
body{
background: #FF0000;
}| Property | Value | Example |
| background |
background-color background-image background-repeat background-attachment background-position |
body{ background: #FF0000; } body{ background: url(stars.gif) no-repeat top; } body{ background: #00FF00 url(stars.gif) no-repeat fixed top;} |
| background-attachment |
scroll fixed |
body { background-image: url(stars.gif); background-attachment: fixed } |
| background-color |
color-rgb color-hex color-name transparent |
p{ background-color: #00FF00 } |
| background-image |
url |
body{ background-image: url(stars.gif); background-color: #000000; } |
| background-position |
top left top center top right center left center center center right bottom left bottom center bottom right x% y% xpos ypos |
body{ background-image: url(stars.gif); background-repeat: no-repeat; background-attachment:fixed; background-position: top left } body{ background-image: url(stars.gif); background-repeat: no-repeat; background-attachment:fixed; background-position: 0% 0% } |
| background-repeat |
repeat repeat-x repeat-y no-repeat |
