• google plus

How to Use the CSS Background Shorthand Property

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.

  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.
About Webucator

Webucator provides instructor-led training to students throughout the US and Canada. We have trained over 90,000 students from over 16,000 organizations on technologies such as Microsoft ASP.NET, Microsoft Office, Azure, Windows, Java, Adobe, Python, SQL, JavaScript, Angular and much more. Check out our complete course catalog.