Little question about Background shorthand property

[raven666]

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?

[lasjorg]

As long as you do not by mistake overwrite any properties and adhere to any property order requirements, I don’t see a problem.

But when I tested it in Codepen with the code you posted I didn’t see initial for the value of the background-image property, I saw the url value.

Edit: Or did you mean initial has the strikethrough?

[juangpereira]

If it works well for you, if you are comfortable with the code, if you can’t find a simpler way to code that block and if the inspector shows it perfectly, then it will be good practice.
Until one day an error appears haha

[raven666]

@lasjorg

Edit: Or did you mean initial has the strikethrough?

Initial has the strikethrough, on “styles” tab, on “computed” tab is good