I have DIV which has 2 backgrounds, in my case, it is gradient and image. I want to change the size of the background image, but not the size of the gradient ? Is it possible ?
Please note: I don't want to use 2 DIVs, one for gradient and one for background image
EDIT:
<div id="button"></div>
#button { background: url(img.png) no-repeat 0.5em 0.5em, -webkit-gradient(linear, left top, left bottom, from(#74ae0f), to(#497105)); }
Ok, by just simple coincidence I have found answer to my question. I couldn't find it anywhere on the internet, so I just tried this and it worked as I wanted:
background-size: 2em 2em, 100% 100%;
The first declaration "2em 2em" applies to background image and the second declaration "100% 100%" applies to background gradient. Therefore using the same order as both backgrounds were declared in background definition.
Now it seems simple and straightforward, but I didn't find it in any documentation or webpage.
i think you can just add
-o-background-size: 80%, 30%;
-webkit-background-size: 80%, 30%;
-moz-background-size: 80%, 30%;
background-size: 80%, 30%;
