Multiple images on background using CSS?

Question

I don't know if someone ask this question before.I am working on MVC + Security application and done all the parts, but there is some minor issues in display page, below is my .css file's snippet

body{  
    background-color:#D8D8D8;
    background-image:url("../css/logo.gif");
    background-repeat:no-repeat;
    background-position:right top;
    margin-right:200px;
    margin-left:15px;
    }

This is my company's logo. Now I have to add another image at (position:right bottom) of the page. Can any body suggest how to do it? or it is not possible?

Thank you

robertc · Accepted Answer · 2012-02-27 13:33:37Z

5

The background-image property can accept a comma-separated list of values in CSS3, but not all browsers support it yet:

body{  
    background-color: #D8D8D8;
    background-image: url("../css/logo.gif"), url("../css/other-logo.gif");
    background-repeat: no-repeat, no-repeat;
    background-position: right top, right bottom;
    margin-right: 200px;
    margin-left: 15px;
}

If you need broad support the usual approach is to add an extra wrapper element.

answered Feb 27, 2012 at 13:33

robertc

76k19 gold badges201 silver badges181 bronze badges

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

2 Comments

CherryFlavourPez Over a year ago

See caniuse for browser support. IE<9 don't support multiple backgrounds, but basically everything else does.

Jamie Schembri Over a year ago

CSS3 Pie supports multiple backgrounds, and I use them with it all the time. css3pie.com

Turnip · Accepted Answer · 2012-02-27 13:35:07Z

2

Something like this should work:

   body { background-image: url(image_1.jpg), url(image_2.jpg);
          background-position:top right, bottom right;
        }

answered Feb 27, 2012 at 13:35

Turnip

36.8k15 gold badges92 silver badges118 bronze badges

Collectives™ on Stack Overflow

Multiple images on background using CSS?

2 Answers 2

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related