Background Shorthand Property
Last updated: 2026-09-13
background Background Shorthand Property
background is the shorthand for the background properties, letting you set the background color, image, position, size, repetition, and more in a single declaration. The shorthand keeps code concise, and any sub-property you omit is reset to its default value. It is one of the most widely used shorthands in CSS.
| Category | |
|---|---|
| Initial Value | transparent none repeat scroll 0% 0% auto padding-box border-box |
| Inherited | No |
| Applies To | all |
| Animation Type | shadow |
| CSS Version | CSS1 |
| Status | Standard |
📝 Syntax
background: [<bg-color> || <bg-image> || <bg-repeat> || <bg-position> [ / <bg-size> ]? || <bg-attachment> || <bg-clip> || <bg-origin>];⚙️ Values
| Value | Type | Description |
|---|---|---|
<bg-layer>*, <final-bg-layer> | Value | Background shorthand |
▶ Example
Edit the code below and see the live result in the playground:
🌐 Browser Support
| Browser |  Chrome |
 Edge |
 Firefox |
 Safari |
 Opera |
|---|---|---|---|---|---|
| background | ✓ v1 | ✓ v12 | ✓ v1 | ✓ v1 | ✓ v1 |
| Supported in all major browsers | |||||
Tip： In the shorthand, background-size must follow background-position, separated by a slash, e.g. center/cover.
Warning： The shorthand resets every unspecified background sub-property to its initial value, which may override previous individual settings.
❓ FAQ
QShould I use the background shorthand or set sub-properties individually?
AThe shorthand is best for defining a complete background at once, e.g. background: #fff url(bg.jpg) no-repeat center/cover; is compact. Individual properties are safer when you only want to change one sub-property (say background-size) without resetting the others. Note that the shorthand resets omitted sub-properties to defaults, so 'shorthand first, then individual' often causes surprises.
QDoes the value order in the background shorthand matter?
AOrder is fairly flexible because browsers identify values by type, but two rules are hard requirements: background-size must immediately follow the position and be separated by a slash (e.g. center/cover), and background-color must come last. The recommended order is color, then image, then repeat, then position/size.
QHow do I make a background image cover the whole element with the shorthand?
AOne line does it: background: #333 url(photo.jpg) no-repeat center/cover;. It is equivalent to setting the background color, image, no-repeat, horizontal and vertical centering, and cover sizing that fills the container while keeping the aspect ratio. This is the standard pattern for banners and card backgrounds — concise and hard to get wrong.
QWhich sub-properties does the background shorthand reset?
AEverything you do not explicitly write is reset to its initial value: image to none, repeat to repeat, position to 0% 0%, size to auto, attachment to scroll, clip to border-box, and origin to padding-box. So avoid mixing 'shorthand then individual' patterns for background sub-properties.
🏷️ Related Properties
💡 Related Cases
📚 Related Tutorials
