How to write a shorthand containing several arguments of length?

Question

Consider the shorthand background.

With him, I can do it:

.variable {
  background-image: url('image.png');
  background-size: 70px 60px;
  background-repeat: no-repeat;
  background-position: 95% 50%;
}

Works perfectly.

But by using the shorthand background with its specifications (ex. size, position ...) with length values (ex. px and %) it doesn’t work:

.variable {
background: url('image.png') 70px 60px no-repeat 95% 50%;
}

How to write, inside a shorthand (background), various length values (70px 60px 90% 50%) of each specification (size, position ...)?

Answer 1

What you are looking for is described in the official documentation, and you can freely mix values in PX and %, provided you put a / in his statement of shorthand.

Documentation: https://www.w3.org/TR/css-backgrounds-3/#example-52742258

Roughly what happens is that when you declare at the same time bg-position and bg-size in the same shorthand the browser cannot identify which value is for which property, so the convention is that one should use a / in the declaration and the values after that bar are considered to be the bg-size

html, body {
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
}
body {
  background: url(https://placekitten.com/100/100) no-repeat 100% 100% / 200px 200px
  /* 100% é o bg-position
  200px é o bg-size */
}