Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Override one part of multiple-property css declaration

Tags:

css

If I have the declaration:

h1 {
  background-image: url(a.png), -webkit-linear-gradient(transparent, black), url(b.png);
}

is it possible to override only one part of the multiple values, i.e. (pseudocode):

h1.foo {
  background-image: default, default, url(c.png);
}
like image 564
ʞɔıu Avatar asked Oct 09 '22 16:10

ʞɔıu


1 Answers

Not currently. You can do the following (change a single property's value in the background shorthand):

.foo {
    background: url('...') 50% 50% no-repeat,
                url('...') 50% 50% no-repeat,
                url('...') 50% 50% no-repeat;
}

.foo {
    background-position: 50% 50%, 75% 75%, 50% 50%;
}

But no matter how you tackle it, you will always have to declare each background image; you can't use 'inherit' for multiple background images as of yet.

like image 158
joshnh Avatar answered Oct 12 '22 00:10

joshnh