1

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

2 Answers 2

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.

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

2 Comments

See caniuse for browser support. IE<9 don't support multiple backgrounds, but basically everything else does.
CSS3 Pie supports multiple backgrounds, and I use them with it all the time. css3pie.com
2

Something like this should work:

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

Comments

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.