Shorthand Backgrounds

Contact Us or call 1-877-932-8228
Shorthand Backgrounds

Shorthand Backgrounds

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).

selector {
	background: background-color background-image background-repeat background-attachment background-position;
}
CSS Initial Values for the background Property
Property Initial Value
background-color transparent
background-image none
background-repeat repeat
background-attachment scroll
background-position 0% 0%

When using shorthand for the background property, there are some things to be aware of:

  • The background color renders first then the background image is placed over the color. When we cover CSS Background Tricks, we'll see that 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);).

The following example demonstrates the background shorthand property:

Code Sample:

CssShorthand/Demos/Background.html
---- C O D E   O M I T T E D ----
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>

Code Explanation

The above code will render the following:Screen capture: The background shorthand property values

Next