Background-Size: Multiple Values with inherit first

Question

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?

BoltClock · Accepted Answer · 2015-03-05 11:35:35Z

3

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

answered Mar 5, 2015 at 11:35

BoltClock

728k165 gold badges1.4k silver badges1.4k bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Background-Size: Multiple Values with inherit first

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related