Background image is not showing in IE

Question

Background image is not showing in IE. Whereas its showing well in Chrome.

Here is the CSS:

.banner1 {
  background-image: url(/assets/images/banner-1.jpg)!important;
  height: 100%;

  display: block;
}

.banner2 {
  background-image: url(/assets/images/banner-2.jpg);
  height: 100%;

  display: block;
}

.banner3 {
  background-image: url(/assets/images/banner-3.jpg)!important;
  height: 100%;

  display: block;
}

.banner4 {
  background-image: url(/assets/images/banner-4.jpg)!important;
  height: 100%;

  display: block;
}

html:

     <div class="right_bx">


<span class="banner1"></span>

      </div>
 <div class="right_bx">
          <span class="banner2"> </span>
      </div>
 <div class="right_bx">
          <span class="banner3"></span>
      </div>
 <div class="right_bx">
          <span class="banner4"></span>
      </div>

When I refresh the page I see banner 1 image appearing. The image in fisrt div is apperaing in IE..For example if I give banner 2 in first div I am able to see banner 2 image. But subsequent div images are not showing up in IE

Answer 1

Not sure this will work but try this

.banner1 {
  background-image: "assets/images/banner-1.jpg"!important;
  height: 100%;

  display: block;
}

.banner2 {
  background-image: "assets/images/banner-2.jpg";
  height: 100%;

  display: block;
}

.banner3 {
  background-image: "assets/images/banner-3.jpg"!important;
  height: 100%;

  display: block;
}

.banner4 {
  background-image: "assets/images/banner-4.jpg"!important;
  height: 100%;

  display: block;
}

Answer 2

use background: url("..."); or background-image: url("..."); also don't use / at the beginning of the file path.

Change /assets/images/banner-1.jpg to this: assets/images/banner-1.jpg etc.

.banner1 {
  background: url("assets/images/banner-1.jpg");
  height: 100%;

  display: block;
}

.banner2 {
  background: url("assets/images/banner-2.jpg");
  height: 100%;

  display: block;
}

.banner3 {
  background: url("assets/images/banner-3.jpg");
  height: 100%;

  display: block;
}

.banner4 {
  background: url("assets/images/banner-4.jpg");
  height: 100%;

  display: block;
}

Answer 3

Try to use F12 developer tools to check the related elements (whether the image load success or not, and the CSS style). I suppose perhaps the issue is related the div container is empty, so the image not display. you could try to fill content to the div, or refer to the following code to set the fix height property:

.right_bx{
    height: 200px;
}