Dynamically size the background image to fit the window

Question

I have what I thought would be a common issue diagnosed online but nothing I am seeing seems to be working as I expect for some reason. I basically have a web site that has several backgrounds stacked on each other. The idea is that buttons will scroll the background up to the next - (critical point) where each background fits the viewable area of the browser exactly, something like:

[Edit] My problem is with getting the background images/div to fit the size of the browser no matter what size it is. In this example the background fits in the browser nicely, but when I resize (as expected as I have set the background height) you can start to see the next background underneath:

I want the first background to fill the viewable browser window. Only when I click the relevent button will the next background become visible - and will itself fill the viewable browser space.

I am at work at the moment and dont have code ro hand to show exactly what I have tried but feel free to put any suggestions this way as I may have just missed a small detail from other findings I have tried.

did you try to use this background-size: cover; assigned with your backgrounds? — Korbin, Apr 11 '17 at 07:50
I tried a couple of examples using this but I seemed to get stranger behaviour... Maybe the markup I tried wasn't quite right? Do you have an example of what I might try please? — CJH, Apr 11 '17 at 07:55
By strange behaviour I mean scaled down repeated copies of the background and in other instances I just had no background. — CJH, Apr 11 '17 at 07:56
I didn't totally get your question but have you checked this stack? http://stackoverflow.com/questions/423172/can-i-have-multiple-background-images-using-css — Korbin, Apr 11 '17 at 08:03
I have just updated the above with more detail that should hopefully illustrate my plight a bit more. Does that help? — CJH, Apr 11 '17 at 08:19
check this, I guess this is what your looking for http://jsfiddle.net/kevinPHPkevin/a7eGN/ — Korbin, Apr 11 '17 at 08:54
Thanks, that looks promising! I will give it a go when I get home later. — CJH, Apr 11 '17 at 09:29

Salman A · Accepted Answer · 2017-04-11T10:42:50.547

The vh unit can be used to set the height of the backgrounds. In the following example however, I have used it to set the height of divs, and let the background images have auto width, 100% height:

body {
  margin: 0;
}

#menu {
  position: fixed;
  left: .5em;
  top: .5em;
  right: .5em;
  padding: .5em;
  background-color: rgba(255, 255, 255, .7)
}

.item {
  height: 100vh;
  background-size: auto 100%;
  background-position: center center;
}

#item-1 {
  background-image: url(https://dummyimage.com/200x100/FC0/FFF&text=Background+Image);
}

#item-2 {
  background-image: url(https://dummyimage.com/200x100/F0C/FFF&text=Background+Image);
}

#item-3 {
  background-image: url(https://dummyimage.com/200x100/0CF/FFF&text=Background+Image);
}

<div id="menu">
  <a href="#item-1">Item 1</a>
  <a href="#item-2">Item 2</a>
  <a href="#item-3">Item 3</a>
</div>
<div id="item-1" class="item"></div>
<div id="item-2" class="item"></div>
<div id="item-3" class="item"></div>

Amazing - this looks bang-on-target! I will test when I get home with my working project and update if this sorts me out. — CJH, Apr 11 '17 at 11:17

score 1 · Answer 2 · answered Apr 11 '17 at 16:25

I believe that the best option is to size 3 elements to fill the screen, and then set background-size to cover.

This way you are ok when the aspect ratio of the images and the screen don't match

body {
  margin: 0;
}


.item {
  height: 100vh;
  width: 100vW;
  background-size: cover;
}

#item-1 {
  background-image: url(http://lorempixel.com/400/200);
}

#item-2 {
  background-image: url(http://lorempixel.com/600/200);
}

#item-3 {
  background-image: url(http://lorempixel.com/400/600);
}

<div id="item-1" class="item"></div>
<div id="item-2" class="item"></div>
<div id="item-3" class="item"></div>

Dynamically size the background image to fit the window

2 Answers2