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:
    <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;
    } {
    	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 */
    	<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>
    This code renders the following:
    Background Shorthand
Author: Chris Minnick

Chris Minnick, the co-founder of WatzThis?, has overseen the development of hundreds of web and mobile projects for customers from small businesses to some of the world’s largest companies. A prolific writer, Chris has authored and co-authored books and articles on a wide range of Internet-related topics including HTML, CSS, mobile apps, e-commerce, e-business, Web design, XML, and application servers. His published books include Adventures in Coding, JavaScript For Kids For Dummies, Writing Computer Code, Coding with JavaScript For Dummies, Beginning HTML5 and CSS3 For Dummies, Webkit For Dummies, CIW E-Commerce Designer Certification Bible, and 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.