Background image of div in IE8: Setting Responsive Size and Transparency

Question

Why this question should not consider as duplicate: I have read IE 8: background-size fix and How do I make background-size work in IE? however they did not worked in my scenario, it is maybe due to using bootstrap. I want to set a responsive and transparent background for a div.

I am using bootstrap 3.3.6 and I want to display following code in IE8 correctly:

<head>
    <title>Bootstrap Example</title>    
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">    
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="libs/bootstrap-3.3.6-dist/css/bootstrap.min.css">
    <script src="libs/jquery-1.11.2.min.js"></script>
    <script src="libs/bootstrap-3.3.6-dist/js/bootstrap.min.js"></script>
    <link rel="stylesheet" type="text/css" href="libs/myCSS/font-face.css">    
    <script src="libs/respond.js"></script>
    <script src="libs/html5shiv.js.js"></script>
    ...
</head>

<body>
    ...
    <div class="col-md-6">
        <div class="row">
            <div class="col-md-6 text-center center">
                <div class="row">
                    <div class="left-finger-picker img-responsive"> //this is my background image
    ...
</body>

left-finger-picker:

.left-finger-picker {
    width: 200px;
    height: 210px;
    position : relative;
    background-size: cover;     
    background-image : url("../myPics/leftHand.png");
    background-repeat: no-repeat;
    background-size: contain;

    filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='../myPics/leftHand.png', sizingMethod='scale');
    -ms-filter: "progid:DXImageTransform.Microsoft.AlphaImageLoader( src='../myPics/leftHand.png', sizingMethod='scale')";

}

right-finger-picker CSS is like as left-finger-picker except its image src.

output in chrome, firefox and IE11:

output in IE8:

Another problem is that the background of div is white while I want to be transparent, because the original images are transparent in png format.

I thought bootstrap does not support ie8?Could you use the class .img-responsive? - see [link]http://www.w3schools.com/bootstrap/bootstrap_ref_css_images.asp. In respect to the transparent - ie 8 doesn't do it correctly with normal css - see [link]http://stackoverflow.com/questions/4615147/problem-with-opacity-in-ie8 — phooey, Dec 04 '16 at 14:51
@JishnuVS [It does](http://getbootstrap.com/getting-started/#support-ie8-ie9). It [will stop](https://v4-alpha.getbootstrap.com/getting-started/browsers-devices/#supporting-internet-explorer-8) though. — GSerg, Dec 04 '16 at 14:57
@GSerg Thanks for your valuable information , i heard its supporting ie9 and above, anyway sorry for the comment — Jishnu V S, Dec 04 '16 at 15:00
Possible duplicate of [IE 8: background-size fix](http://stackoverflow.com/questions/4885145/ie-8-background-size-fix) — GSerg, Dec 04 '16 at 15:03
Off course bootstrap support IE8, please see http://stackoverflow.com/questions/17947182/ie8-issue-with-twitter-bootstrap-3 — Hosein Aqajani, Dec 04 '16 at 15:09
You have custom non-bootstrap CSS that involves `background-size`. IE8 does not support `background-size`. You are saying existing solutions to IE8 `background-size` problem are no good because they do not mention bootstrap. However it would seem to me bootstrap is not relevant to your question at all. — GSerg, Dec 05 '16 at 00:15
Dear @GSerg if you consider the updated question carefully you could observe that even by adding the two previous solutions, the output result is still corrupted. It means that those solution really not worked for me, it is maybe due to bootstrap or something else, I do not know, I have just guessed. Furthermore, I have the transparency problem. — Hosein Aqajani, Dec 05 '16 at 07:14
@GSerg is correct - your issue is purely CSS and the use of `background-size` please see: http://caniuse.com/#search=background-size I would recommend using an `img` tag and scaling this with `%width` etc. — Zze, Dec 05 '16 at 07:25
I do not think so @Zze , please notice the `img-responsive` as a bootstrap class which I have used in the intended `div` — Hosein Aqajani, Dec 05 '16 at 07:29
That's all well and good, but look at your CSS. `background-size: cover; `. - if you inspect your element in IE8 you will clearly see that it is not applied. so if your image is 1000x1000 and your div is 200x200 then the background image will NOT scale down to this size. Instead it will appear exactly as your screenshot shows :) — Zze, Dec 05 '16 at 07:39
So, What can I do @Zze ? could you please help me? The previous solutions did not help :( — Hosein Aqajani, Dec 05 '16 at 07:44

score 1 · Answer 1 · answered Dec 04 '16 at 15:01

1

I would advise you to use img-tags with width and height settings via css. If the IE8 support is mandatory.

Please take a look at this w3c page which states that the backgound-size attribute is only supported from IE version 9.

answered Dec 04 '16 at 15:01

glovas

70
2
10

score 0 · Answer 2 · edited May 23 '17 at 11:53

Unfortunately, background-size is not supported in IE8. There is a reported workaround here however in my experience this is more trouble than it's worth and this is backed up by the confusion in the comments on that answer.

Your best bet is to probably just forget about trying to use background-size and instead swap it for a plain old <img>

The snippet below exemplifies your issue. There is zero bootstrap and as you can see, you get the desired result in everything* bar IE8 - which is displaying something similar to your screenshot.

Note - stack overflow snippets don't work in IE8 You will have to copy pasta them and make your own .html files to test this.

<style>
    #div1{
      width: 175px;
      height: 75px;
      background-image: url('http://placehold.it/350x150');
      background-size:cover;
    }
</style>


<div id="div1">
</div>

In the linked SO it suggests you use the following:

<style>
    #div1{
        width: 175px;
        height: 75px;
        background-image: url('http://placehold.it/350x150');
        background-size:cover;

        filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(
        src='http://placehold.it/350x150',
        sizingMethod='scale');
   }
</style>
<div id="div1">
</div>

In this case it works! however I assure you that this implementation is a case by case basis.

My preferred method is just have a simple <img> tag and then wrap this in a parent div to emulate a container.

<style>
    #div1{
        width: 175px;
        height: 75px;
    }
 
    img{
        width: 100%;
        height: auto;
    }
</style>
<div id="div1">
    <img src="http://placehold.it/350x150" />
</div>

If you opt to use the first example of the second, I highly recommend reading into the caveats of using such an implementation. AlphaImageLoader Filter.

Background image of div in IE8: Setting Responsive Size and Transparency

2 Answers2