The Complete Advanced Guide to CSS/

...

/

The Background Shorthand Property

The Background Shorthand Property

Shorthands exist to make declarations faster and easier. The background shorthand isn't left out too. In this lesson, we will take a look at how the CSS backkground shorthand really works

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:

.bg {
    background:
...