Responsive background images – fit one dimension, expand other dimension

[victorhooi]

Hi,

I’m trying to use multiple stacked background images responsively, and I’m really struggling to get them working.

My final product is meant to look like this:

http://i.stack.imgur.com/Tltkd.png

Basically, for each background image, I want to fill the entire width of the browser – then I want the heigh of each to expand to show the whole photograph, preserving the aspect ratio.

Codepen of what I have so far (using placeholders for the photos).

http://codepen.io/victorhooi/pen/jxtFd

On I’m setting min-height, which isn’t quite what I want – the heigh is fixed, and I’m not really showing the whole image.

If I don’t set min-height, each background image’s heigh shrinks to the elements inside, as you can see in .

Cheers, Victor

[georgearnall]

The only way I can think of would be to use javascript. CodePen. As far as I know, I don’t think this is possible without it but its only one line of jQuery.

You need to make sure to define each ‘slide’ with the same element such as the <section> so that it can set a height to all of the slides.

Hope this helps :)

[victorhooi]

Hi,

@georgearnall – Cool, thanks for that =).

I was hoping there was a pure CSS solution, but that code is pretty concise.

So if I just attach this to the onReady for the page, it’ll happen once when the page renders, right? If I want it to work when they also resize the window, should I also attach it to the window.onresize event?

Also, one thing I noticed was that as you scroll, the “photo1” and “photo2” text seem to remain stationary on the page, while everything else scrolls.

This is on Chrome on OSX.

Is that normal behaviour?

When I was using actual photographs, I noticed weird scrolling as well – the content would scroll up/down, but the background image seemed to remain where it was, if that makes any sense.

Is there any way to make it all scroll together?

Cheers,
Victor

[victorhooi]

Hi,

Aha, for the last issue, I think it was the background-attachment. For some reason, it was being set to fixed. I’ve changed it here:

http://codepen.io/victorhooi/pen/jphsq

Not sure why, since my understanding was that it defaulted to scroll?

https://developer.mozilla.org/en-US/docs/Web/CSS/background-attachment

So, should I attach your jQuery to the onReady and/or the window.onresize?

It’s strange there isn’t some in-built CSS behaviour to take care of this, I would have thought this would be a fairly common requirement.

Cheers,
Victor

[georgearnall]

If you are already have a JS file that will run, you can just include that snippet somewhere and it will work. To make it update when people resize and on document ready, use this:

$(function() {
    $('section').css('height', innerHeight);
  $(window).resize(function() {
    $('section').css('height', innerHeight);
  });
});

See this in CodePen :)

[Author]

Posts