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.
2 answers
solution1
1 2016-12-04 15:01:22
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.
solution2
0 2016-12-05 08:11:17
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 .
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.