0

I have this style:

#bkg-evs-1 {
    background-color: white!important;
    background-image: url("../img/rip-van-winkle-copy8-adj.jpg"), url("../img/Background-events2.jpg");
    background-repeat: no-repeat, no-repeat;
    background-size: 29% 100vh, 70%;
    background-position: top right, 0% 0%;
    background-attachment: fixed, scroll;
    display: none;
    min-height: 2500px;
    width: 100%;
    position: absolute;
    top: 0;
    left: 0;
}

Whenever I try to get the background-size on internet Explorer 11 using:

jQuery(document).ready(function(event) {
    var bs = jQuery("#bkg-evs-1").css("background-size");
    console.log(bs);
});

I always get 0px 0px, 0px on the console.

Now,

  • with other browsers I always get the right computed background-size (which depends of the window size), no problems.
  • I have tried using pure javaScript as well without results.
  • I have also noticed that with internet explorer 11, if I use this CSS background-size: 300px 300px, 300px 300px; there is no problems, the computed size will result on the console: 300px 300px, 300px 300px.
  • And, finally, in internet explorer 11, if I write directly in the console: jQuery("#bkg-evs-1").css("background-size") the console will give me the right values. So, the problem only happens when the page loads.

Am I doing something wrong?

viery365
  • 935
  • 2
  • 12
  • 30
  • 1
    Check [this](http://stackoverflow.com/questions/37707969/ie11-wont-background-size-cover). May it help! – RonyLoud Feb 27 '17 at 15:43
  • 1
    Could it be that the js is running before the image has finished loading? If the image has not finished loading, then the background size will be zero. – Paul Thomas Feb 27 '17 at 15:43
  • 1
    According to http://caniuse.com/#search=background-size you should be fine in IE 11. Further, your own testing by running `jQuery("#bkg-evs-1").css("background-size")` in an IE 11 console proves that this works. You mustn't be calling that in the right place (or more likely, at the right _time_). – Yuck Feb 27 '17 at 15:44
  • @RonyLoud I will check out, thank you! – viery365 Feb 27 '17 at 15:45
  • @PaulThomasGC @Yuck I've already tried to call it it in all kind of places inside the javaScript files I am using and always returns the same. However, as the test I did with fixed values `background-size: 300px 300px, 300px 300px;` works maybe proves that the problem has to do with using percentages? I don't know, but thank you. I will try to change places again. – viery365 Feb 27 '17 at 15:48
  • 1
    This can be because IE11 has a partial support for `vh` units as a whole. There are several issues concerning the support of these units in IE11 You can check it here [link](http://caniuse.com/#search=vh) – Petya Naumova Feb 27 '17 at 15:54
  • @Julsy Thank you very much! I will check it out now. It is a very interesting clue. – viery365 Feb 27 '17 at 16:03
  • 1
    If it is just % values, what happens? Might rule out `vh` being an issue – Paul Thomas Feb 27 '17 at 16:16
  • @PaulThomasGC If it is just % values, ex: `29% 100%, 70%` returns `0px 0px, 0px`. I made the experience after the last comment. I still don't know what to do:( Only works if the values are in pixels. Example: `29% 500px, 70%` returns `0px 500px, 0px` – viery365 Feb 27 '17 at 17:08
  • 1
    there is a plugin called waitforimages (https://github.com/alexanderdickson/waitForImages) is it worth trying that, waiting for all images, and seeing if you get the same results? That might rule out the image not being loaded issue. – Paul Thomas Feb 27 '17 at 17:13
  • @PaulThomasGC Perfect, I will try it out now. Thank you very much! – viery365 Feb 27 '17 at 17:16
  • @PaulThomasGC Very useful plugin indeed. I will save it to use it other times. Thank you! However, after using it, the result is the same. Even getting the confirmation that the images were loaded, the result is always the same: `0px 0px, 0px`. I even tried now to set the background-size with `jQuery jQuery("#bkg-evs-1").css("background-size", "29% 100vh, 70%");` just before the jQuery to get it and still does not work:( – viery365 Feb 27 '17 at 17:32

0 Answers0