How to Use the CSS Background Shorthand Property

  • google plus

In Brief...

The background property is used to set the individual properties for background-color, background-image, background-repeat, background-attachment, and background-position. Note that order matters (although some browsers may show some leniency). Learn how to use the CSS background shorthand property in the following steps.

Take our Ajax Training course for free.

See the Course Outline and Register

Instructions

  1. The syntax for the background property is as follows:
    selector {
    background: background-color background-image background-repeat
    background-attachment background-position;
    }
    The CSS initial values for the background property are as follows:
    Property Initial Value
    background-color transparent
    background-image none
    background-repeat repeat
    background-attachment scroll
    background-position 0% 0%
  2. When using shorthand for the background property, there are some things you need to be aware of:
    • The background color renders first then the background image is placed over the color. This can be exploited.
    • You can use background in place of background-color to set the background color (e.g., background: red;).
    • You can use background in place of background-image to set the background image (e.g., background: url(bg.gif);).
  3. The following example demonstrates the background shorthand property:
    <!DOCTYPE HTML>
    <html>
    <head>
    <meta charset="UTF-8">
    <title>CSS Background shorthand</title>
    <style type="text/css" media="screen">
    div {
    	margin: .75em;
    	padding: .5em;
    	height: 50px;
    	border: 1px solid lightgrey;
    }
    div.one {
    	background: #ccc; /* shorthand for background-color */
    }
    
    div.two {
    	background: url('Images/block.gif'); /* shorthand for background-image */
    	color: white;
    }
    
    div.three {
    	background: #ccc url('Images/block.gif') repeat-x scroll 0% 0%; /* uses all available values */
    	color: white;
    }
    
    div.four {
    	background: #ccc url('Images/block.gif') no-repeat scroll 20% 75%; /* different background position values */
    }
    
    div.five {
    	background: #ccc url('Images/block.gif') no-repeat scroll bottom center; /* and still different background position values */
    }
    </style>
    </head>
    
    <body>
    	<div class="one">This background sets only the color.</div>
    	
    	<div class="two">This background sets only the image.</div>
    	
    	<div class="three">This background sets all available values.</div>
    	
    	<div class="four">This background modifies the background-repeat and the background-position values.</div>
    	
    	<div class="five">This background modifies the background-position values.</div>
    </body>
    </html>
    This code renders the following:
    Background Shorthand

Author: Chris Minnick

Chris is a prolific author and trainer, and the CEO of WatzThis?. His published books include Writing Computer Code, JavaScript for Kids, Coding with JavaScript For Dummies, Beginning HTML5 and CSS3 For Dummies, Webkit For Dummies, CIW eCommerce Certification Bible, and New Riders' XHTML.

Discuss