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.