1

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.

Community
  • 1
  • 1
  • It might help to include the html as well... – JonSG Jun 21 '16 at 01:45
  • @JonSG It has nothing to do with the HTML, but as per your request I've included it anyways. –  Jun 21 '16 at 02:04
  • @JonSG I solved the problem by manually setting `div.style.backgroundSize` to `window.innerWidth` and `window.innerHeight`. –  Jun 21 '16 at 03:15
  • Cool, I tried for several hours last night and was not able to come up with anything other than a slew of posts about this issue. – JonSG Jun 21 '16 at 13:17
  • @JonSG Yeah, all the articles and posts that I came across were similar, yet different. Stoked this worked, but there is one issue: the image becomes proportional to the browser size, so if you resize your browser to funny proportions the image also looks funny. A few media queries and or if else statements should do the job, though. Do you mind sharing the articles you came across? Thanks in advance<3 –  Jun 21 '16 at 21:04

1 Answers1

1

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';
};