Search code examples
javascripthtmlcssbackground-imagebackground-size

Use javascript to change background css on browser resize

So, I want the background-size to change when the browser height is equal to 2/3 of the browser width. Here is the code I've tried, and I can't get it to work.

<body id="body" onresize="BG_resize()">
<script>
    function BG_resize() {
        var w = window.innerWidth;
        var h = window.innerHeight;

        if ((w * (2 / 3)) < h){
            document.getElementById("body").style.background-size = "auto 100%";
        }
    }
</script>
</body>

The css:

#body {
    background:url("Layout/BG.jpg");
    background-size:100% auto;
}
Solution

  • Another alternative to all of these is to use media queries (since you're doing this on the window) and get rid of the javascript all together. This will run smoother as the browser does most of the work for you.

    Looks like the query you are looking for is the aspect-ratio so something like:

    @media screen and (min-aspect-ratio: 2/3) 
{
   body {
      background-size: auto 100%;
   }
}
@media screen and (max-aspect-ratio: 2/3) 
{
   body {
      background-size: 100% auto;
   }
}