How to Use the CSS Background Shorthand Property
See CSS: Tips and Tricks for similar articles.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.
- The syntax for the
background
property is as follows:
The CSS initial values for theselector { background: background-color background-image background-repeat background-attachment background-position; }
background
property are as follows: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 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 ofbackground-color
to set the background color (e.g.,background: red;
). - You can use
background
in place ofbackground-image
to set the background image (e.g.,background: url(bg.gif);
).
- The following example demonstrates the background shorthand property:
This code renders the following:<!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>
Related Articles
- Learn the Very Basics of CSS in One Minute
- How to Create a CSS External Style Sheet
- How to Align Text with CSS
- How to Create a Horizontal Navigation Menu with CSS
- How to Create a Fixed-Width Layout with CSS
- How to Remove Spacing Between Table Borders with CSS
- How to Set a Background Image with CSS
- How to Set Text Spacing and Placement in CSS
- How to Style a Table with CSS
- How to Create Boxes with Rounded Corners in CSS
- How to Create a Vertical Navigation Menu with CSS
- How to Use the CSS Opacity Property
- How to Use Multiple Background Images with CSS
- Absolute Positioning with CSS
- How to Use the CSS Border Shorthand Property
- How to Create CSS Button Links
- How to Create a Fluid-Width Layout with CSS
- How to Set Text and Background Color with CSS
- How to Create a CSS Embedded Style Sheet
- How to Add Inline Styles to CSS
- How to Create a Border with CSS
- How to Use the CSS Padding Shorthand Property
- How to Create a Fly-Out Menu with CSS
- How to Use CSS Media Queries in Responsive Design
- How to Adjust Margins with CSS
- How to Use the CSS Background Shorthand Property (this article)
- How to Create a Form without Tables Using CSS
- How to Modify Fonts in CSS
- How to Create a Drop-Down Menu with CSS
- How to Apply Padding with CSS
- Fixed Positioning with CSS
- How to Use CSS Transitions
- How to Use the CSS list-style Shorthand Property
- How to Change Text Style in CSS
- How to Create CSS Sprites
- How to Use CSS with Different Media Types
- How to Import Style Sheets with @import in CSS
- How to Use the CSS White-Space Property
- How to Use the CSS Z-index Property
- How to Create Drop Shadows with the box-shadow Property in CSS3