Background Size Cover Ie11 Not Covering Full Area

background size cover IE11 not covering full area

I've managed to fix the issue by applying the following CSS. I'm not a 100% happy with it, but it'll have to do.

If anyone runs into the same issue, test this fix, it may work depending on your scenario, maybe it won't.

.bg {
    ...
    background-size: 100% 100%;
}

Holy crab-shoe on a stick ... well, this is kinda embarrassing.

The problem was: IE was zoomed out.

The solution: zoom in.

The CSS was working fine all along.

IE11 wont background-size: cover

<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">

fixed the issue.
Code would work on local machine,jfiddle and codepen but when uploading the site the above code needed to be added to display correctly.

background-size: cover not vertically aligned only in desktop Safari

After attempting to do a browser hack and targeting Safari with special CSS to fix this, I checked in El Capitan and this behavior is corrected. So I'm going to abandon this issue.

Is there an equivalent to background-size: cover and contain for image elements?

Solution #1 - The object-fit property (Lacks IE support)

Just set object-fit: cover; on the img .

body {
  margin: 0;
}
img {
  display: block;
  width: 100vw;
  height: 100vh;
  object-fit: cover; /* or object-fit: contain; */
}

<img src="https://loremflickr.com/1500/1000" alt="A random image from Flickr" />

---

Related Topics