Search⌘ K
AI Features
Home
Courses
The Complete Advanced Guide to CSS

The Background Shorthand Property

Explore how to use the CSS background shorthand property to efficiently combine several background settings into a single statement. Understand property order and usage tips to write cleaner, easier-to-maintain CSS for styling projects like a movie order page.

We'll cover the following...

The background shorthand property like other shorthands, can be a life saver. When you have a lot of background declarations, it easier to have them declared in one statement.

For example, consider the code below:

.bg {
  background-image: url('path/to/image.png');
  background-position: 50% 50%;
  background-size:  cover;
  background-repeat: no-repeat;       
}

Using the background shorthand, it becomes this:

 ...