Hi! I have a little question about the shorthand property on background, I have no issues with my work, but after looking at chrome inspector I have this doubt.
I have this sass mixin that I ussualy use for hero images:
@mixin bgCover ($image) background: url($image) center center / cover no-repeat fixed
Now I’m working on slideshow, which uses same background values but without the fixed one. This the html structure in pug:
section.slideshow ul li .overlay h3 high quality // and more items
I’m setting up the images as background on the li elements like this:
.slideshow // etc li // etc background: 50% 50% / cover no-repeat h3 // etc li:nth-child(1) background-image: url($url-to-image) //and the other items
So my doubt is if is a good practice to declare the background in this way, I ussually when need to break the shorthand in different css block I declare the image FIRST and not last like this time.
I expect this result:
background: url($url-to-image) 50% 50% / cover no-repeat
Chrome inspector show this in this way:
background-image: initial; //this one is disabled in chrome with a strikethrough text background-position-x: 50%; background-position-y: 50%; background-size: cover; background-repeat-x: no-repeat; background-repeat-y: no-repeat; background-attachment: initial; background-origin: initial; background-clip: initial;
In “computed” section is ok, and my slideshow works just fine, so there is a problem to write the shorthand in this way?