Forums

The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home Forums JavaScript Responsive background images – fit one dimension, expand other dimension

  • This topic is empty.
Viewing 5 posts - 1 through 5 (of 5 total)
  • Author
    Posts
  • #150169
    victorhooi
    Participant

    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

    #150174
    georgearnall
    Participant

    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 :)

    #150234
    victorhooi
    Participant

    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

    #150257
    victorhooi
    Participant

    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

    #150317
    georgearnall
    Participant

    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 :)

Viewing 5 posts - 1 through 5 (of 5 total)
  • The forum ‘JavaScript’ is closed to new topics and replies.