CSS Backgrounds

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.

Example

body{
  background: #FF0000;
}

Backgrounds Properties

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
Comments
comments powered by Disqus