Background shorthand property

I have seen a lot of examples where background shorthand property is used instead of the non-shorthand properties like background-size or background-image:

1
2
background: center center fixed no-repeat;
background-image: url("some-image");

The problem is that we have to be really careful about the order of background and background-image property. If we replace them, if we put shorthand property after the background-image property, the shorthand property will overwrite the background-image property. It will set the background-image to none.

1
2
background-image: url("some-image");
background: center center fixed no-repeat;

If we by accident switch the order of these properties, we will lose background-image. That means if we come to our project several years later, we will have to remember not to switch positions of those two properties.

My advice is to split that shorthand into multiple properties. It will give us more control over the properties, we will not have to remember the order of the properties and our code is much readable!

1
2
3
4
5
background-image: url("kittie.png");
background-size: cover;
background-position: center center;
background-repeat: no-repeat;
background-attachment: fixed;