CSS Tricks: Use two background images for one div

Here is a simple line of code that I use if I need to display two background images stacked on top of or next to each other in one div.

Two background images stacked vertically

To use two background images stacked vertically on top of each other (one at the top of the page and the other on the bottom half), use this line of code:

background:url(http://yourwebsite.com/images/image1.png) no-repeat, url(http://yourwebsite.com/images/image2.png) repeat-y;

Note: The important thing to remember is that you must have either a repeat-x, repeat-y, repeat, or no-repeat specification for the first image in the line of code (in this example, image1.png).

Two background images stacked horizontally

You can use two background images side by side in one div with this line of code:

background:url(http://yourwebsite.com/images/image1.png) repeat-y, url(http://yourwebsite.com/images/image2.png) repeat;

There are several reasons why you might want to display two background images in the same div, one of which is to keep your codes as concise as possible. Another reason is if you are working with the body of the website and want to use a different background for the top half of the site than you are using for the remaining lower part of the site.

Note: To make sure that your site is cross-browser compatible, make sure that you also use this IE fix to display two background images in one div in Internet Explorer.

As always, feel free to leave your comments, questions and suggestions in the comment section below. Thanks for stopping by!

0
Shares

8 Comments

  1. Ju says:

    Hey Libby,

    Thanks for this – it works fine for me on Firefox and Chrome but not working for me on IE7 (background images not coming through). Is there anything I can do for IE7?

    Thanks,

    Ju

    • Libby Fisher says:

      Hi Ju,

      Thanks for asking! Is there any way that you can divide the div that you are trying to apply two backgrounds to into two divs? If you want you can email me the source code you are working with or a link to the actual page and I will take a look at it. My email is: libby@thelibzter.com.

  2. Carla says:

    Really useful, I’m gonna try it.. Thanks for sharing.

  3. Gabi says:

    Sweet technique – thanks for the tip Libby! I always struggle with the easiest way to do this, I’ll be referencing this page next time it comes up.

  4. Julious says:

    Thank you. This totally saved my arse!

  5. Leave a response

    Current ye@r *