Parallax Background Image That Fills Container

I'm using stellar.js to apply a parallax effect to a background image. The height of the container around the background image is set by javascript to the window height minus the h

Solution 1:

I'm not quite sure if this would work but something to try is to add javascript that runs when the page resizes:

$(function() {
    $(window).resize(function() {
       // replace "100" with whatever makes it the best height:var newHeight = ($(window).height() - 100);
       var pictureHeight = 823;
       if (newHeight > pictureHeight) newHeight = pictureHeight;
       $(".an-yee-tsee-o.parallax.panel-pane").height(newHeight + "px");
    });
});

The point here is that you want to resize the parallax background panel when the window is resized. Even if this isn't quite right, hopefully it gets you on the right track. Best of luck!

Note - I was trying to fix the way the site looks when you load it on a "short" screen and then resize the browser larger. For your issue of the background not filling you can scale your background image up for that in a tool such as gimp for larger screens (or get a larger image to start with).

EDIT - Added code to make sure the div never ends up larger than the picture. You can also run this same code on load. It might not look as originally intended but it should work at least.

Solution 2:

I finally solved this by using skrollr.js instead of stellar.js, and then setting the background image to "background-attachment: fixed" in the css. The scripts give a similar effect, but scrollr.js starts with the top offset at 0 so it doesn't leave a gap below the image.