CSS Background Shorthand

The background shorthand lets you set color, image, repeat, position, size, and attachment all in one line instead of six separate declarations.

In this page:

Shorthand Syntax and Property Order
Why Order and the Slash Matter
Shorthand Resets Unspecified Longhands
Partial Shorthand Is Still Valid
When to Use Shorthand vs Longhand

Shorthand Syntax and Property Order

The background shorthand accepts: background-color background-image background-position/background-size background-repeat background-attachment background-origin background-clip, in roughly that order, with position and size separated by a forward slash when both are given. Any longhand not included in the shorthand is reset to its initial value, not left alone.

Example: Shorthand Syntax and Property Order

css

<style>
.box {
  height: 150px;
  background: #fff url('https://placehold.co/200x100') center/cover no-repeat fixed;
}
</style>
<div class="box">color, image, position/size, repeat, attachment — all in one shorthand</div>

Why Order and the Slash Matter

position must come before size, separated by /, because the parser needs to distinguish two length values meant as a position from two meant as a size -- background: url(x.jpg) center/cover no-repeat sets position to center and size to cover, while swapping their order is invalid.

Example: Why Order and the Slash Matter

css

<style>
.box {
  height: 150px;
  background: url('https://placehold.co/200x100') center/cover no-repeat;
}
</style>
<div class="box">Position comes before the slash, size after</div>

Shorthand Resets Unspecified Longhands

Writing background: red only sets background-color and silently resets background-image, background-repeat, background-position, and every other background-* property to their defaults -- this is the most common shorthand gotcha, accidentally wiping out an image set elsewhere.

Example: Shorthand Resets Unspecified Longhands

css

<style>
.box {
  background-image: url('bg.jpg');
}
.reset {
  background-image: url('bg.jpg');
  background: red;
}
</style>
<div class="box">Keeps its image</div>
<div class="reset">Shorthand silently wiped the image, only red remains</div>

Partial Shorthand Is Still Valid

You don't have to include every value; background: url('bg.jpg') no-repeat center is perfectly valid and only touches image, repeat, and position, but still resets color/size/attachment/origin/clip to initial since they weren't mentioned.

Example: Partial Shorthand Is Still Valid

css

<style>
.box {
  height: 150px;
  background: url('https://placehold.co/200x100') no-repeat center;
}
</style>
<div class="box">Only image, repeat, and position specified — rest reset to defaults</div>

When to Use Shorthand vs Longhand

Shorthand is more compact for a fully-specified background but longhand is safer when only tweaking one aspect of an existing background (e.g. changing just background-position in a media query) since it won't accidentally reset the others.

Example: When to Use Shorthand vs Longhand

css

<style>
.full {
  background: #333 url('bg.jpg') center/cover no-repeat;
}
@media (max-width: 600px) {
  .full {
    background-position: top;
  }
}
</style>
<div class="full">Longhand tweak in the media query, shorthand elsewhere</div>

🔒

Chapter Quiz — Complete all 21 topics to unlock

0/21 topics done

Complete these topics first:

← Previous Lesson CSS Background Attachment Next Lesson → CSS Multiple Backgrounds