CSS Property background

background is a shorthand property of expressing the various background properties using a single rule.

Summary

Item	Value
Initial value	Initial value from individual properties.
Inherited	No.
Version	CSS1
JavaScript syntax	object.style.background="red url(yourImage.gif) top left no-repeat"
Applies to	All elements.

CSS Syntax

Here is the format for the value of this property, referencing the individual properties:

background:  <background-color> 
             <background-position>  
             <background-size>
             <background-repeat>  
             <background-origin>  
             <background-clip>  
             <background-attachment>
             <background-image>

It is a long declaration, but you can omit values. If you do, the browser will use the defaults.

Property Values

The property values are listed in the following table.

Value	Description	CSS
background-color	set the background color	1
background-position	set position for background images	1
background-size	set size for background images	3
background-repeat	how to repeat the background images	1
background-origin	set positioning area for background images	3
background-clip	set painting area for background images	3
background-attachment	if to scroll with the rest of the page	1
background-image	set background images to use	1

Browser compatibility


`background`	Yes	Yes	Yes	Yes	Yes

Example

An example showing how to use background CSS property.

<!DOCTYPE HTML>
<html>
  <head>
      <style>
h1 {<!--   w  w  w  . j  a v  a 2  s  . c  o  m-->
    font-size: 2.1em;
    background: pink;
    padding: 1em;
    border: thin solid black;
}
p {
    font-size: 0.9em;
    padding: 1em;
    border: thin solid black;
    background: #00ff00 url('http://java2s.com/style/download.png') no-repeat fixed center; 
    color: white;
}
      </style>
  </head>
  <body>
      <h1>This is a heading</h1>
      <p>This is a paragraph of text.</p>
  </body>
</html>

Click to view the demo

Example 2

The following code uses the border Shorthand Property.

<!DOCTYPE HTML>
<html>
<head>
<style type="text/css">
p {<!--   w ww  .  j av  a 2 s.c  o m-->
  border: 10px double black;
  background: lightgray top right no-repeat border-box content-box local
    url(http://www.java2s.com/style/download.png);
}
</style>
</head>
<body>
  <p>This is a test.
    This is a test.This is a test.This is a test.This is a test.
    This is a test.This is a test.This is a test.This is a test.
    This is a test.This is a test.This is a test.This is a test.
    This is a test.This is a test.This is a test.This is a test.
    This is a test.This is a test.This is a test.This is a test.
    This is a test.This is a test.This is a test.This is a test.
    This is a test.This is a test.This is a test.This is a test.
    This is a test.This is a test.This is a test.This is a test.
  
  </p>
</body>
</html>

Click to view the demo

This single property is equivalent to the following set of individual properties:

background-color: lightgray; 
background-position: top right; 
background-repeat: no-repeat; 
background-origin: border-box; 
background-position: content-box; 
background-attachment: local; 
background-image: url(http://www.java2s.com/style/download.png);