Using the background Shorthand Property

The background property sets all of the background values in a single declaration.

Here is the format referencing the individual properties:

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

If you omit values, then the browser will use the defaults.

 
<!DOCTYPE HTML> 
<html> 
    <head> 
        <title>Example</title> 
        <style type="text/css"> 
        p { 
            border: 10px double black; 
            background: lightgray top right no-repeat border-box content-box local url(http://java2s.com/Book/HTML-CSSImages/star.png); 
        } 
        </style> 
    </head> 
    <body> 
        <p> 
            HyperText Markup Language (HTML) is the main markup language for 
            displaying web pages and other information that can be displayed 
            in a web browser(From From Wikipedia, the free encyclopedia).
        </p> 
    </body> 
</html>
  
Click to view the demo

This single property


background: lightgray top right no-repeat border-box content-box local url(background.png); 

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(background.png);
Home 
  HTML CSS Book 
    CSS  

Background:
  1. Setting Element Backgrounds
  2. Setting the Background Color and Image
  3. Setting the Background Image Size
  4. Setting the Background Image Position
  5. Setting the Attachment for the Background
  6. Setting the Background Image Origin
  7. Using the background Shorthand Property
Related: