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 |