Background image not displaying on IE7

Question

My footer has a repeating background image. It shows up perfectly on modern browsers. Here is what it looks like on Firefox.

But then when viewing it on Internet Explorer 7

Here is my code that controls the background.

CSS

#footer {
  background: transparent url("/assets/img/template/wild_oliva_dark.png") repeat scroll 0% 0%;
}
#footer {
  text-align: left;
  background-position: center;
  background-color: #1a1a1a;
}

It is not in a media query.

As you can see, I used a <div> with id of #footer instead of using <footer> for better compatibility with older browsers. I am using modernizr .

EDIT:
At the suggestion of another member, I added Selectivizr. But I might have implemented it wrong because it did not test out successfully.

EDIT 2:
The footer is using responsive sticky footer styling. Not sure if some of those classes are affecting it.

<div id="footer" class="block">

The block class has this:

.block { display: table-row; height: 1px; }

Answer 1

Looks like your shorthand of background is in the wrong order.

Try

background: transparent url("/assets/img/template/wild_oliva_dark.png") repeat scroll 0% 0%;

Answer 2

Also you can use selectivizr for your css file.

The selectivizr similar modernizr.

selectivizr is a JavaScript utility that emulates CSS3 pseudo-classes and attribute selectors in Internet Explorer 6-8. Simply include the script in your pages and selectivizr will do the rest.

.

Step-By-Step using selectivizr

1-downloading selectivizr

2-insert below code in the header.

<script type="text/javascript" src="[JS library]"></script>
<!--[if (gte IE 6)&(lte IE 8)]>
  <script type="text/javascript" src="selectivizr.js"></script>
  <noscript><link rel="stylesheet" href="[fallback css]" /></noscript>
<![endif]--> 

3-Now you can use css3

Compatibility Ie 6 ,7,8