How to Set Background Shorthand in CSS: Simple Guide

Use the background shorthand property in CSS to set multiple background styles like color, image, position, size, repeat, and attachment in one line. The order is flexible but usually starts with background-color, then background-image, background-position, background-size, background-repeat, and background-attachment. This saves space and keeps your CSS neat.

Syntax

The background shorthand property can include these parts:

• background-color: sets the background color.
• background-image: sets an image URL.
• background-position: sets where the image starts.
• background-size: sets the size of the image.
• background-repeat: controls if/how the image repeats.
• background-attachment: fixes the background or scrolls with content.
• background-origin and background-clip can also be included but are less common.

Order is flexible but color usually goes first or last. Use a slash / to separate position and size.

css

background: [background-color] [background-image] [background-position] / [background-size] [background-repeat] [background-attachment];

Example

This example sets a light blue background color, a centered background image sized to 100px by 100px, no repeat, and fixed attachment so it stays when scrolling.

css

body {
  background: lightblue url('https://via.placeholder.com/150') center / 100px 100px no-repeat fixed;
  height: 100vh;
  margin: 0;
}

Output

The page background is light blue with a 100x100 pixel image centered and fixed in place, not repeating.

Common Pitfalls

Common mistakes include:

• Forgetting the slash / between background-position and background-size, which breaks the syntax.
• Using incorrect order that confuses the browser, especially mixing size and position without slash.
• Not specifying background-repeat when you want no repeat, so the image repeats by default.
• Using URLs without quotes or with wrong paths causing images not to load.

css

/* Wrong: missing slash between position and size */
body {
  background: lightblue url('image.png') center 100px 100px no-repeat fixed;
}

/* Correct: slash separates position and size */
body {
  background: lightblue url('image.png') center / 100px 100px no-repeat fixed;
}

Quick Reference

Property	Description	Example Value
background-color	Sets background color	lightblue
background-image	Sets background image URL	url('image.png')
background-position	Sets image start position	center, top left, 50% 50%
background-size	Sets image size	cover, contain, 100px 100px
background-repeat	Controls image repetition	no-repeat, repeat-x, repeat-y
background-attachment	Fixes background or scrolls	fixed, scroll

Key Takeaways

Use the background shorthand to combine color, image, position, size, repeat, and attachment in one line.

Separate background-position and background-size with a slash (/).

Remember to specify no-repeat if you don't want the image to repeat.

Quotes around image URLs are recommended for reliability.

Order is flexible but keep syntax clear to avoid errors.