CSS Background Shorthand

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

<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

<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

<style>
.box {
  background-image: linear-gradient(135deg, #1e88e5, #8e24aa);
  height: 60px;
}
.reset {
  background-image: linear-gradient(135deg, #1e88e5, #8e24aa);
  background: red;
  height: 60px;
}
</style>
<div class="box">Keeps its gradient 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

<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

<style>
.full {
  background: #333 linear-gradient(135deg, rgba(255,255,255,.2), transparent) center/cover no-repeat;
  height: 80px;
  color: #fff;
  padding: 8px;
}
@media (max-width: 600px) {
  .full {
    background-position: top;
  }
}
</style>
<div class="full">Longhand tweak in the media query, shorthand elsewhere</div>