Supersized Slideshow below Header

Question

I'm using the supersized jquery plugin in order to display a fullscreen background slideshow. Look at this website (it's not my own but I'm using the same structure):

http://mysampleconcept.com/situs4/

As you can see (for example if you give the header some opacity) the images begin at the top of the body. But I want them to begin below the header (so that the header doesn't cover the top of the image).

If you give the supersized LIs for example top: 100px; the whole image moves down so that the bottom of the image disappears below my footer. So that's not the solution I want.

So all in all which I need is the image to stretch to the biggest size it can, while still being inside the window not stretching over the top 100px nor bottom.

How can I do this?

Sorry, my English is not the best...

I found this solution but I don't know how to implement it: https://stackoverflow.com/a/12889088/1981981

Answer 1

You can use the solution offered in the question you refered to as a starting point. Just place it right below the $.supersized() inside your document ready function. Since you want a top offset, we have to modify the top value aswell. I modified the snipped to suit your needs:

var portfolioSize = function() {
  var headerOffset = 100;
  $('#supersized').css({ 
    height: $(window).height() - headerOffset,
    top: headerOffset + 'px'
  }); 
};
portfolioSize();
$(window).resize(function() { portfolioSize(); });

I changed the $(window).load Event to a direct call, since we place the code inside the document ready function.

Don't forget to modify the CSS for positioning as mentioned in the other answer (https://stackoverflow.com/a/12889088/860205).