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!