How to Create a Responsive and Transparent Background Image for a Div in Internet Explorer 8

Question

How to Create a Responsive and Transparent Background Image for a Div in Internet Explorer 8

Reasons why this question is not a duplicate: Despite reading previous solutions such as IE 8: background-size fix and How do I make background-size work in IE?, they did not work for my specific case. This could be due to the fact that I am using bootstrap. My goal is to create a responsive and transparent background for a div.

Currently, I am utilizing bootstrap 3.3.6 and I am encountering issues with properly displaying the following code in IE8:

<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>

The CSS for "left-finger-picker" is as follows:

.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')";

}

The CSS for "right-finger-picker" is similar to "left-finger-picker" except for the image source.

Desired output in Chrome, Firefox, and IE11:

https://i.sstatic.net/7LtCV.png

Current output in IE8:

https://i.sstatic.net/423CW.png

Another issue I am facing is that the background of the div appears white instead of transparent, even though the original images are transparent in PNG format.

javascript jquery html css twitter-bootstrap

Answer 1

Answer №1

For optimal compatibility with IE8, my suggestion would be to utilize img tags with specified width and height settings through css.

If you require IE8 support, consider referencing this w3c resource, which mentions that the background-size attribute is exclusively supported starting from IE version 9.

Answer 2

For optimal compatibility with IE8, my suggestion would be to utilize img tags with specified width and height settings through css.

If you require IE8 support, consider referencing this w3c resource, which mentions that the background-size attribute is exclusively supported starting from IE version 9.

Answer 3

Answer №2

Sadly, the background-size property is not compatible with IE8. While there is a workaround mentioned here, in my opinion it causes more hassle than it's worth, as evident from the confusion in the comments on that solution.

Your best alternative might be to abandon the use of background-size altogether and instead replace it with a simple <img>.

The code snippet below demonstrates the issue. There is no bootstrap included, and you can observe that the desired outcome is achieved in every browser except for IE8, which presents something different compared to your intended design.

Note - stack overflow snippets are not functional in IE8. You will need to manually copy the code and create your own test .html files.

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


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

The suggested workaround in the linked Stack Overflow thread involves using the following approach:

<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 certain scenarios, this workaround does work! However, it should be noted that its effectiveness varies depending on individual cases.

Personally, I find it more effective to simply use an <img> tag and enclose it within a parent div to mimic 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 decide to go with the first workaround provided, I strongly advise researching the drawbacks associated with such an implementation. AlphaImageLoader Filter.

Answer 4

Sadly, the background-size property is not compatible with IE8. While there is a workaround mentioned here, in my opinion it causes more hassle than it's worth, as evident from the confusion in the comments on that solution.

Your best alternative might be to abandon the use of background-size altogether and instead replace it with a simple <img>.

The code snippet below demonstrates the issue. There is no bootstrap included, and you can observe that the desired outcome is achieved in every browser except for IE8, which presents something different compared to your intended design.

Note - stack overflow snippets are not functional in IE8. You will need to manually copy the code and create your own test .html files.

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


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

The suggested workaround in the linked Stack Overflow thread involves using the following approach:

<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 certain scenarios, this workaround does work! However, it should be noted that its effectiveness varies depending on individual cases.

Personally, I find it more effective to simply use an <img> tag and enclose it within a parent div to mimic 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 decide to go with the first workaround provided, I strongly advise researching the drawbacks associated with such an implementation. AlphaImageLoader Filter.

How to Create a Responsive and Transparent Background Image for a Div in Internet Explorer 8

Answer №1

Answer №2

Similar questions

What is the technique for adding a stroke to an SVG border?

What should I verify if the Grails application is not loading on IE9 exclusively?

Manipulate a JavaScript object with AngularJS - viewing and editing capabilities

What are some ways to effectively incorporate the getRange() function within a forLoop while assembling data in Google Apps Script?

The jQuery show/hide functionality is malfunctioning

Encountering the value of 'undefined' when using jQuery

In vue.js, when utilizing the select all method for checkboxes, it is important to ensure that disabled checkboxes are not

Designing personalized plugins with Typescript in Nuxt

Concealing the NavBar When Showing a Popup Using React

jQuery modal popup failing to display the value of an element

Saving integer data retrieved from DynamoDB in a React Native application

Troubleshooting data binding issues in Angular.js using Jade and Express

What is the best way to export two functions from a server-side module in JavaScript?

Unintended repetition with fetch() for loading a texture

AngularJS ng-repeat filter fails to update multiple columns at once

Guide on incorporating arrays into an array using JavaScript

Transitions in Vue do not function properly when used in conjunction with a router-view containing a

File.type cannot be obtained in IE 11 and IE Edge due to compatibility issues

Preventing unauthorized access to PHP files by restricting calls to only those initiated by the website, and not through methods like Inspect Element

Warning issued before exiting the page