Grow your CSS skills. Land your dream job.

DIV with two background?

  • # April 9, 2012 at 9:22 am

    Hi everyone,

    I’m trying to make a div have two backgrounds, i tried lots of things but nothing works.

    here is what I am trying to achieve:

    Any help would be very appreciated.

    # April 9, 2012 at 9:33 am

    First of all, your image disappeared.

    Second, CSS3 can do this, but it doesn’t have adequate support in all browsers yet. If you wanted to try it out for the browsers that do support it, you use this syntax:


    #myDiv {
    background: url(http://mysite.com/image1.jpg) no-repeat top left, /* watch the comma there */
    url(http://mysite.com/image2.jpg) no-repeat bottom right; /* now a semicolon */
    }

    Note that you can use as many as you want, but it’s generally depreciated. Make sure to specify locations for the backgrounds or they’ll pile up.

    Also, note that if you want a background COLOR in addition, you’ll need to declare this separately as

    background-color: #fff;

    with whatever color you want. If you try to mix it in with the multiple backgrounds, it won’t work.

Viewing 2 posts - 1 through 2 (of 2 total)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".