Question

i have this css code, and i want to shorten it.

#one{
background: #6cab26;
background-image: url(#1_img_url),-moz-linear-gradient(top, #444444, #999999); /* FF3.6+ */
}

#two{
background: #6cab26;
background-image: url(#2_img_url),-moz-linear-gradient(top, #444444, #999999); /* FF3.6+ */

}

#three{
background: #6cab26;
background-image: url(#3_img_url),-moz-linear-gradient(top, #444444, #999999); /* FF3.6+ */
}

This css code is to use gradient with background!

it’s working so fine, but how to short it?

i want something like this

#one,#two,#three{
background: #6cab26;
background:-moz-linear-gradient(top, #444444, #999999);
}

#one{
background-image: url(#1_img_url)
}
#two{
background-image: url(#2_img_url)
}
#three{
background-image: url(#3_img_url)
}

Answer 1

Unfortunately, CSS currently does not provide a way to override a separate background-image layer when using multiple background-image layers.

You can take advantage of CSS preprocessors like LESS or SASS, and then you could save your gradient in variable to prevent its duplication. For example, in LESS:

@grad: -moz-linear-gradient(top, #444444, #999999);

#one {
    background-image: url(#1_img_url), @grad;
}

#two {
    background-image: url(#2_img_url), @grad;
}

#three{
    background-image: url(#3_img_url), @grad;
}