a tag background image not showing on ie7

Question

I have some a tag that are assigned to class like: class='user-home' and I'm using this css to achieve background image:

.user-options .user-home{
    background-image:url('../../img/user-home.png');
    background-position:center;
    background-size: 14px 14px;
    background-repeat:no-repeat;
    border: none;
}

And the problem- This is what I'm getting on chrome/mozila/ie11

This is what I'm getting on ie7

What will be the solution? Thanks.

Answer 1

The rule background-size is not supported on ie7. It is recommended to use small images (14X14) and not resize it with CSS rules, this way you're saving traffic and improving your page loading time.

There is a workaround ( how-do-i-make-background-size-work-in-ie ) but I still think it's better to just resize your image.

Answer 2

That's because background-size is a CSS3 property which isn't supported before IE9... CSS background-size not working in IE7/8

Only solution i think is to edit image to 14px 14px

Answer 3

The browsers like IE7 do not support CSS3 properties. So you cannot use them otherwise you get these types of results.

You need to change the background-image CSS to this:

.user-options .user-home{
    background-image:url('../../img/user-home.png');
    background-position:center;
    background-repeat:no-repeat;
    border: none;
}

and now, edit the image resolutions and change its width and height to 14x14 yourself.

Or if you want to use the current CSS, please go to this website from Google:

https://code.google.com/p/ie7-js/

And from there, include the JS needed to make the IE behave like a standard browser, this is the code:

<!--[if lt IE 7]>
<script src="http://ie7-js.googlecode.com/svn/version/2.1(beta4)/IE7.js">
</script>
<![endif]-->

This JS will enable almost many of the CSS and HTML attributes. This should be included in head element.

Answer 4

Are you sure it's IE7 not the compatibility view (IE6) anyway background-size wont work with IE7

A way of your question, Earlier I used to use DD_belatedPNG Javascript to fix PNG issues in IE6

you may use one of the following tools to fix all IE issues:

• Normalize
• ie7-js
• respond.min.js

For other HTML5 fixes and Media Query I use excanvas.js and respond.js

Code could be as follows:

<!--[if lt IE 9]>
  <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
  <script src="https://oss.maxcdn.com/libs/respond.js/1.3.0/respond.min.js"></script>
<![endif]-->