CODEWITHSUNDEEP
htmlcssbackground-image
Frodik
Frodik

Reputation: 15465

Is it possible in CSS3 to have multiple background images with specific size for each of them?

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)); }

Upvotes: 1

Views: 434

Answers (2)

Frodik
Frodik

Reputation: 15465

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.

Upvotes: 2

cmplieger
cmplieger

Reputation: 7361

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%;

Upvotes: 1

Related Questions