Question

I am building a site which has a background image at the bottom. This should effectively be a sticky footer whereby it sits at the bottom of the viewport if the page content is short but will move down below the viewport bottom if the content is longer. This can be done without a problem however I want the content to be able to overlap the footer image to a certain point. So if the footer image is 100px in height for example (and the content is long enough) I would want the footer stuck to the bottom of the viewport with the content overlapping it by 80px (leaving a 20px gap at the bottom). If the content is longer than this then the footer should move down below the viewport bottom so there is still a 20px space between the bottom of the content and the end of the footer. I’m probably being stupid but I can’t work out how to do this and would be most grateful if someone could point me in the right direction?

Thanks so much!

Dave

Answer 1

I obviously didn’t look closely enough, you can actually just decrease the height of the push div which will change how much the content overlaps the footer, that’s absolutely perfect, thanks for so much for making me take another look!