The background Shorthand Property

The CSS background property is the ultimate shorthand for defining all individual background-related properties in a single declaration. Using the shorthand dramatically reduces CSS file size and improves readability, allowing you to style an element's entire background with one line of code.

The Syntax and Order

The background shorthand can accept any number of background properties, with one important exception regarding background-size.

General Syntax

styles.css

selector {
  background: <color> <image> <repeat> <attachment> <position> / <size> ;
}

The Recommended Order

While the property order is generally flexible, following a consistent pattern makes your code easier to read.

Property	Example Value	Description
background-color	#f0f0f0	The solid fallback color (can be placed anywhere).
background-image	url('star.png')	The image, pattern, or gradient.
background-repeat	no-repeat	How the image tiles.
background-attachment	fixed	Scroll behavior (scroll, fixed, local).
background-position	center top	The starting position of the image.
/ background-size	/ cover	The size/scaling of the image. Must be placed after position, separated by a forward slash (/).

Practical Examples

1. Simple Hero Banner

A common use case is setting a full-width banner image with proper scaling and color fallback.

styles.css

.hero-banner {
  /* Color | Image | Repeat | Attachment | Position / Size */
  background: 
    #111          /* background-color */
    url('hero.jpg') /* background-image */
    no-repeat     /* background-repeat */
    fixed         /* background-attachment */
    center / cover; /* background-position / background-size */
  
  height: 500px;
}

2. Tiled Pattern

Setting a small image to tile across a section.

styles.css

.tile-section {
  /* Color | Image | Repeat */
  background: #fff url('pattern.png') repeat;
}

3. Multiple Backgrounds

The shorthand is essential for setting multiple stacked backgrounds. You must provide a full set of values for each background layer, separated by commas.

The properties are listed from top layer to bottom layer.

styles.css

.multi-background {
  background: 
    /* Top Layer (Semi-transparent dots) */
    url('dots.png') repeat center center,
    
    /* Bottom Layer (Gradient) */
    linear-gradient(to right, #4CAF50, #8BC34A);
    
  background-color: #333; /* Color is shared by all layers */
}

Shorthand Caveats

1. background-size Requires the Slash (/)

If you omit background-size, it defaults to auto auto. If you include it, it must immediately follow the background-position value, separated by a forward slash.

styles.css

/* CORRECT: 50% 50% is position, / 200px 100px is size */
background: url('img.jpg') no-repeat 50% 50% / 200px 100px;

/* INCORRECT: The browser won't know where position ends and size begins */
/* background: url('img.jpg') no-repeat 50% 50% 200px 100px; */

2. Omitted Values Reset

Any property not explicitly defined in the shorthand will be reset to its initial value.

If you had:

styles.css

.box { background-repeat: repeat-x; }
.box { background: #000; } /* This resets background-repeat to its initial value, 'repeat'. */

To avoid unwanted resets, always define all required properties in the shorthand.

Interactive background Shorthand Demo

Use the live editor to define all background properties in a single line.