CODEWITHSUNDEEP
htmlcssimageinternet-explorer
Daniel Apt
Daniel Apt

Reputation: 2648

IE: Background Image does not display. Browser repaints on hover?

So this is one of the strangest IE bugs I have come across, and it's happening in IE11!

I have a simple element that looks as follows:

<div class="article">
    <div class="wrapper">
        <header><h1>Hello World</h1></header>
        <div class="image" style='background-image: url("http://upload.wikimedia.org/wikipedia/commons/4/41/Left_side_of_Flying_Pigeon.jpg");'>&nbsp;</div>
    </div>
</div>

with the following CSS:

*{margin:0;padding:0;}

.article {
    height:200px;
    background:aliceblue;
}

.wrapper {
    height:100%;
    display:table;
    width:100%;
}

header, .image {
 display:table-row;
    width:100%;
}

header {
    background:red;
    height:10px;
}

.article:hover .image {
    opacity:0.5;
}

For a JSFiddle click here (you might need to click Run to see the bug appear)

The issue is that when starting the page we do not see the background-image. When you hover over .article then the image suddenly appears! When hovering out the image remains (as expected).

It is as if the browser only repaints the background-image when the user hovers?

The image does not display on initial page load

The image does not display on initial page load

The image displays on a mouse hover, the image will remain afterwards.

The image displays on a mouse hover, the image will remain afterwards

How can we display the background-image by default?

Fiddle > http://jsfiddle.net/ykrbe4zy/

Upvotes: 0

Views: 1255

Answers (2)

Bhojendra Rauniyar
Bhojendra Rauniyar

Reputation: 85575

The key problem with image is that you're applying the display: table-row; for the image which seems not supported by IE properly.

Use display: inline-block; instead:

.image{
    display: inline-block;
    height: 100%;
}

here's the working demo

Upvotes: 1

UID
UID

Reputation: 4494

Change below code

from :

header, .image {
    display: table-row;
    width: 100%;
}

header {
    background: red;
    height: 10px;
}

TO 

header, .image {
    display: block;
    width: 100%;
    height: 100%;
}

header {
    background: red;
    height: 40px;
}

Updated Fiddle : http://jsfiddle.net/ts8ahznd/7/

Updated Code:

CSS

 * {
      margin: 0;
      padding: 0;
  }
  .article {
      height: 200px;
      background: aliceblue;
  }
  .wrapper {
      height: 100%;
      display: table;
      width: 100%;
  }
  header, .image {
      display: block;
      width: 100%;
      height: 100%;
  }
  header {
      background: red;
      height: 40px;
  }
  .article:hover .image {
      opacity: 0.5;
  }

HTML

<div class="article">
    <div class="wrapper">
        <header>
            <h1>Hello World</h1>
        </header>
        <div class="image" style='background-image: url("http://upload.wikimedia.org/wikipedia/commons/4/41/Left_side_of_Flying_Pigeon.jpg");'>&nbsp;</div>
    </div>
</div>

Hope this will help!!!

Upvotes: 1

Related Questions