CODEWITHSUNDEEP
htmlcssmedia-queries
Martin
Martin

Reputation: 621

Media Queries issue with browser

I want to load different background pictures depending on the aspect-ratio. I'm using LESS css. The problem is, that I don't get any background-image at all and I can't figure out the problem.

(I know that the css at the moment is nonsense. I was trying to simplyfie my code to get it to work but I couldn't)

This is the LESS css part with the mediaqueries:

#page_back {
     position: absolute;
     top: 0;
     left: 0;
     width: 100%;
     height:100%;
     overflow: hidden;
     z-index: 1;
     background-repeat: no-repeat;
     background-size: 100% auto;

     @media all and (min-aspect-ratio: 1/1) {
         background-image: url(../../images/front.jpg);
     }
     @media all and (max-aspect-ratio: 1/1) {
         background-image: url(../../images/front.jpg);
     }
 }

I just figured out that the compiled result is:

@media all and (min-aspect-ratio: 1) {
  main #page_back { background-image:url(../../images/front.jpg); }
}
@media all and (max-aspect-ratio: 1) {
  main #page_back { background-image:url(../../images/front.jpg); }
}

But in the browser it looks like this:

@media not all {
    main #page_back {
         background-image: url("../../images/front.jpg");
    }
}
@media not all {
    main #page_back {
        background-image: url("../../images/front.jpg");
    }
}

That explains why I don't see any image BUT why is there a not and why is my condition disappeared?

EDIT

I was doing some more research:

  1. I created this js fiddle to see whether my browser can handle the mediaquery http://jsfiddle.net/jnd4f8jd/ It works!
  2. I changed the wrong mediaquery css in browser during runtime of my project to see whether it will work manually: It fails!
  3. I took out all other css files to be sure that the problem is not coming from any other css source: It fails!
  4. Tried an other mediaquery (min-width) It works!

--> It seems to be a problem with this specific media query (aspect-ratio) But it can not be a browser problem because the jsfiddle works as aspected. What could cause a 'aspect-ratio' problem?

Upvotes: 1

Views: 66

Answers (1)

c.early
c.early

Reputation: 186

Could you get round this problem by using Jquery to apply the CSS rather than media queries? Something like this might do the job?

$(document).ready(function() {
    var ViewHeight = $(window).height();
    var ViewWidth = $(window).width();
    var AspectRatio = ViewHeight/ViewWidth;
    if (AspectRatio < 1){
        $("#page_back").css("background-image", "url(../../images/front.jpg)");
    } else {
        $("#page_back").css("background-image", "url(../../images/front.jpg)");
    }
});

Upvotes: 1

Related Questions