CODEWITHSUNDEEP
htmlcss
Michinerou
Michinerou

Reputation: 45

Background-Size: Multiple Values with inherit first

my Question ist about background-size. I wanne use with multiple values.

My Css Code is like this

background-image: url("../img/redlinie.png"), url("../img/umkleidekabine.png");
background-repeat: repeat-x, no-repeat;
background-size: initial, cover

For the first image redlinie.png i need no sizing at all. I just need sizing for the 2nd PNG. But here the Problem. It seems that it isnt allowed to have inheritor initial to be the first value?

Is there some kind of "trick" that i can set multiple background images with no background-size for the first png, but with contain for the 2nd PNG?

Upvotes: 3

Views: 126

Answers (1)

BoltClock
BoltClock

Reputation: 724142

The inherit and initial keywords must appear alone. They cannot be used even in a comma-separated list of values.

There isn't a way to omit a component value and have the browser interpret it as an initial value, since background-size isn't a shorthand property, just a property that accepts multiple comma-separated values. Omitting any trailing values causes the browser to reuse the values that are specified, rather than the initial value.

Since the initial value of background-size is auto, you can simply specify that:

background-size: auto, cover

Upvotes: 3

Related Questions