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!
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
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.
Really useful, I’m gonna try it.. Thanks for sharing.
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.
Thanks for commenting Gabi, I am glad you found this post helpful!
[...] post is an extension of my previous post on how to use two background images for one div. However, the CSS trick we covered will not work correctly in Internet Explorer (no surprise there, [...]
Thank you. This totally saved my arse!
Glad to hear it!
[...] post is an extension of my previous post on how to use two background images for one div. However, the CSS trick we covered will not work correctly in Internet Explorer (no surprise there, [...]
Thanks Libby
For an excellent and most successful solution
For those with IE problems try the double quotes around url (“image.gif”) especially Gif’s
JR
Hi John,
Thanks for sharing your tip, I appreciate it!
Nice post!! Thanks for sharing the information!!!
Thanks for this tip! I’m not using a div however it works perfectly in the body tag for everything BUT IE. In IE it only shows the left image and it repeats it. I’m going to try that fix you posted up, Libby and use div tags.
Hi Ben,
Hope it works for you, let me know if you have any questions. Thanks for visiting!
Thanks alot!!!
It works very wel!!!