Search code examples
javascriptcssbackground-imagebackground-size

Multiple divs (some with and without background-attachment: fixed) sharing a background-image / Strange result with background-size property

HTML

<html>
  <head>
    <link href="test.css" rel="stylesheet" type="text/css">
  </head>
  <body>
    <div id="top"></div>
    <div id="bot">
      <div id="one"></div>
      <div id="two"></div>
      <div id="thr"></div>
      <div id="fou"></div>
    </div>
    <script src="test.js"></script>
  </body>
</html>

CSS

#top {
    height: 100vh;
}

#bot {
    width: 100vw;
    height: 100vh;
    display: flex;
}

    #one, #two, #thr, #fou {
        flex: 1;
        background: url('image.jpg');
    }

    #one, #thr {
        background-attachment: fixed;
    }

JS

function whatever() {
    var oneW = one.clientWidth;
    two.style.backgroundPosition = '-' + oneW + 'px 0';
    fou.style.backgroundPosition = '-' + oneW * 3 + 'px 0';
};

I have run into a problem. The general effect that I want to create can be achieved with the code above. However, the dimensions of the background-image seem to be the dimensions of the actual image file since I have not created and set the background-size property, so the image will not be centered and instead is cut off if the browser is smaller than the image itself. I have tried applying background-size: cover, but it seems to effect the elements with background-attachment: fixed differently than those without that property, and I'm not sure what to do or how I can get around this. Does anybody know how I can address this particular issue? Thanks in advance for any solutions, help, or ideas!

UPDATE

So, based on information from two pages that (CSS background-size: cover + background-attachment: fixed clipping background images and http://www.carsonshold.com/2013/02/css-background-sizecover-doesnt-like-fixed-positioning/) I have come across, I have added some JS to adjust the height of the background-attachment: fixed divs, which kind of solves the problem but not really. Below is the additional JS.

function whatever()
{
    ...
    var oneH = one.clientHeight;
    one.style.backgroundSize = 'auto ' + oneH + 'px';
    thr.style.backgroundSize = 'auto ' + oneH + 'px';
};

This will align the image perfectly if the browser is full screen or quarter screen, even though background-size is set to cover, but for whatever reason the image now behaves as if background-size is set to contain. I'm so confused.

UPDATE II

I solved this by manually setting the size of each div to that of window's innerWidth and innerHeight. The code is below in the answer section.

Solution

  • Manually setting the width and height of each div so that they correspond to the width and height of the window works.

    function whatever() {
    ...
    var x = window.innerWidth;
    var y = window.innerHeight;
    one.style.backgroundSize = '' + x + 'px ' + y + 'px';
    two.style.backgroundSize = '' + x + 'px ' + y + 'px';
    thr.style.backgroundSize = '' + x + 'px ' + y + 'px';
    fou.style.backgroundSize = '' + x + 'px ' + y + 'px';
};