How to make background-size cover work in IE

Question

I try all kind of methods that said it will make background-size: cover; work in IE (version needed to cover IE8+), which…. - Added the meta for IE=edge and chrome=1 - Added all three "-mos-" into the class - Also, try putting everything into one line format (but this will not my result since I am building up a template for other, the background link need to be in-line.

What other thing did I miss??

.-bg-image-70 {
  min-height: 70vh;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;

  -moz-background-size: cover;
  -o-background-size: cover;
  -ms-ie-background-size: cover;

}

  <div class="-bg-image-70" style="background-image: url(https://cdn.pixabay.com/photo/2015/04/19/08/33/flower-729512_960_720.jpg);" >

<div class="container"  ><h1>Hello!</h1></div>
        </div>

score 0 · Answer 1 · answered Mar 11 '19 at 06:30

From this article, we can see that the "background-size: cover;" support IE 9+, so your code not working in IE 8 browser. I suggest you could set the width and height properties for the container div and background image. Like this:

<style>
    .-bg-image-70 {
        background: url("http://3.bp.blogspot.com/_EqZzf-l7OCg/TNmdtcyGBZI/AAAAAAAAAD8/KD5Y23c24go/s1600/homer-simpson-1280x1024.jpg") no-repeat;
        width: 900px;
        height: 450px;
        border: 1px solid;
        background-size: 1300px 700px;
    }
</style>
<div class="-bg-image-70">
    <div class="container"><h1>Hello!</h1></div>
</div>

Besides, you could also refer to this thread and this article to fix this issue.

How to make background-size cover work in IE

1 Answers1