Multiple background images with CSS in IE8

There are still a decent percent of browsers out there on the increasingly-antiquated Internet Explorer version 8.
So while upgrading a site recently to an all-CSS based design, we wanted to continue to support IE8 and needed multiple background images on a single element using CSS.
This post was the most elegant explanation I found.

For future reference, here is the magic:

HTML

    <div class="container">
    	I need 3 backgrounds!
    </div>

We are going to apply multiple backgrounds in IE8 to this div.container by using the :after and :before psuedo classes in IE8.
CSS

    .container {
    	background-color: #eee; // A light gray
    	height:200px;
    }

    .container:before {
    	content: '';
		background-color: #3c3c3c; // A medium dark gray
		width: 100%;
		height: 30px;
		top: 0px;
		display: block;

		z-index: 1;
		position: relative;
    }

    .container:after {
    	content: '';
		background-color: #000; // Black
		width: 100%;
		height: 10px;
		top: 0px;
		display: block;
		z-index: 1;
		position: relative;
    }