How do I define multiple CSS background attributes?

Question

Is it possible to have those backgrounds work together?

background: url("../images/search.png") no-repeat scroll 9px 4px transparent;
background:-webkit-gradient( linear, left top, left bottom, color-stop(0, #fdca14), color-stop(1, #ff8d02) );
background:-moz-linear-gradient( center top, #fdca14 0%, #ff8d02 100% );

Thanks :)

somecallmejosh · Accepted Answer · 2012-12-06 14:52:10Z

3

You may also want to check out CSS3 Pie if you need to be able to do this in older IE browsers.

answered Dec 6, 2012 at 14:52

somecallmejosh

1,4252 gold badges10 silver badges16 bronze badges

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

Comments

dsgriffin · Accepted Answer · 2012-12-06 14:55:36Z

3

CSS3 allows it. Here's an example of multiple background images being used in the same background:

.exampleClass {
    background-image: url(images/example1.png), url(images/example2.png);
    background-repeat: repeat-x, repeat;
}

It's supported in all major browsers (except for IE8 and before sadly)

edited Dec 6, 2012 at 14:55

answered Dec 6, 2012 at 14:46

dsgriffin

68.8k17 gold badges141 silver badges139 bronze badges

Comments

Idrizi.A · Accepted Answer · 2012-12-06 14:54:59Z

2

CSS

.class{
    background: url("../images/search.png") no-repeat scroll 9px 4px transparent,-webkit-gradient( linear, left top, left bottom, color-stop(0, #fdca14), color-stop(1, #ff8d02) ),-moz-linear-gradient( center top, #fdca14 0%, #ff8d02 100% );
}

edited Dec 6, 2012 at 14:54

answered Dec 6, 2012 at 14:48

Idrizi.A

12.3k16 gold badges52 silver badges92 bronze badges

Collectives™ on Stack Overflow

How do I define multiple CSS background attributes?

3 Answers 3

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related