Declaring all CSS background properties in one line — especially background-size

Question

So here's my code:

background: url(images/my-image.png) no-repeat center center / cover;

This works fine on Chrome and Firefox but not on Safari for some reason?

I used to declare my background-size on it's own line but as I understand it it should be possible to declare all properties in one line using a forward slash?

Any help would be much appreciated. Thanks.

Answer 1

As one line short hand code seems do unknown for safari browsers meaning of cover:

background: url(images/my-image.png) no-repeat center center / cover;

I faced the same issue before. And the following worked for all browsers:

background: url(images/my-image.png) no-repeat;
background-position: center;
background-size: cover;/*now this is known for the safari*/

Answer 2

background property has following attributes.

• url("image path")
• bg-color e.g transparent or any color
• bg-img-repeat e.g repeat or no=repeat
• bg-image-postion vertical and horizontal e.g center center
• bg-img-size e.g cover, contain, 100%, 800px, or 200px 100px (width and height) etc

We will write like this

background: url("images/my-image.png") transparent no-repeat bottom center  / cover;
background-size: cover; /*for safari we can add this sperately*/