The Background Shorthand Property

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:

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

Isn’t that awesome?

How it Works

As seen in the example above, the background property takes in background properties ...