What's new? | Help | Directory | Sign in
Google
Project Home
  
Wiki
  
Issues
  
Source
    
Search
for
Updated Sep 19, 2008 by pilgrim
Labels: about-css, is-css-property, from-w3c
BackgroundCSSProperty  
The background property is a shorthand property for setting 'background-color', 'background-image', 'background-repeat', 'background-attachment' and 'background-position'.

You are here: Home > CSS Reference > Properties > background

Usage

body {
   background: #0066CC url(background_image.png) repeat-x top center;
}
/* An example of condensing many background-X properties into the shorthand background property. */

Values

Browser compatibility

Compatibility table legend

Test IE8 IE7 IE6 FF3 FF2 Saf3 Op9 Chrome
style.backgroundColor reflects <div style='background: #808080'> N N N Y Y Y Y Y
style.backgroundPosition reflects <div style='background: 10% 40%'> Y Y Y Y Y Y Y Y
style.backgroundPosition reflects <div style='background: 5px 10em'> Y Y Y N Y N Y N
style.backgroundColor reflects <div style='background: black'> N N N Y Y Y Y Y
style.backgroundImage reflects <div style='background: bogus'> Y Y Y Y Y Y Y Y
style.backgroundAttachment reflects <div style='background: bogus'> Y Y Y Y Y Y Y Y
style.backgroundPosition reflects <div style='background: bottom'> N N N N N N Y N
style.backgroundPosition reflects <div style='background: bottom right'> Y Y Y N Y N Y N
style.backgroundPosition reflects <div style='background: center center'> Y Y Y N Y N Y N
style.backgroundPosition reflects <div style='background: center'> N N N N N N Y N
style.backgroundAttachment reflects <div style='background: fixed'> Y Y Y Y Y Y Y Y
style.backgroundPosition reflects <div style='background: left'> N N N N Y N Y N
style.backgroundRepeat reflects <div style='background: no-repeat'> Y Y Y Y Y Y Y Y
style.backgroundImage reflects <div style='background: none'> Y Y Y Y Y Y Y Y
style.backgroundRepeat reflects <div style='background: repeat'> Y Y Y Y Y Y Y Y
style.backgroundRepeat reflects <div style='background: repeat-x'> Y Y Y Y Y Y Y Y
style.backgroundRepeat reflects <div style='background: repeat-y'> Y Y Y Y Y Y Y Y
style.backgroundColor reflects <div style='background: rgb(0, 0, 0)'> Y Y Y N N N Y N
style.backgroundPosition reflects <div style='background: right'> N N N N Y N Y N
style.backgroundAttachment reflects <div style='background: scroll'> Y Y Y Y Y Y Y Y
style.backgroundPosition reflects <div style='background: top'> Y Y Y N N N Y N
style.backgroundPosition reflects <div style='background: top left'> Y Y Y N Y N Y N
style.backgroundColor reflects <div style='background: transparent'> Y Y Y Y Y N Y N
style.backgroundImage reflects <div style='background: url(\"http://www.example.com/\")'> N N N Y Y Y Y Y
style.backgroundImage reflects <div style='background: url(http://www.example.com/)'> Y Y Y N N N Y N

Further reading

Sign in to add a comment