1

I am working on a web application that allows me to insert some custom css for the front page.

I want to have a full screen background image at the start page. I understand that I can use background-size:cover which is supported in all latest version of browsers.

                body {
                    background-image:url(/File/Publisher/Start/startpage_background.jpg);
                    background-repeat:no-repeat;
                    background-size:cover;
                }

This works for latest version of Firefox and Chrome. However, it is not working in IE11. The background image does not shrink to cover the entire screen. It displays at its original size and is partially cropped off.

Using F12 to debug, I discover that if I disable either margin-top or margin-bottom (see screenshot), background-size property will work.

enter image description here

I do not want to modify the margin property introduced by the original CSS of the web application. Any way to resolve this problem?

user605179
  • 103
  • 1
  • 2
  • 8

1 Answers1

2

I came across this as well and found that giving body any height makes the cover property have effect as long as it's not set as a percentage. For good order, min-height: 100vh should do :

http://codepen.io/anon/pen/oXmzLL?editors=010

Pretty odd since there's no issue on any other browser but that's IE for ya. Of course it's only present if the content doesn't exceed the window size (edit - it should also not have positioning that takes it out of the document flow).

Not the quickest answer by the way but it's the only topic I came across on this subject (that wasn't about legacy browser support)...

Shikkediel
  • 5,195
  • 16
  • 45
  • 77
  • Cheers, thanks for following up! Not sure if it's an edge case bug but it definitely looks like it. – Shikkediel Aug 07 '15 at 17:36
  • 1
    This solved the issue in IE11 for me on Windows 10, removing the height of the element you're trying to apply min-height to allowed the content to cover as expected. – Deef Sep 17 '19 at 15:10