Footer or Page Background Image – Which Should it Be?

[Christopher]

Christopher

April 2, 2019 at 3:25 pm

Wow, I can’t seem to get my head around where or how to set a background image to end up with what my graphic designer wants. All we’re after is a background image (seen in the linked sample pages) that sits at the page bottom – with space between the content and top of said background image. It seems so simple – just add the background image to the footer (of which there are two, so that’s a bit confusing, thought probably more flexible). But I’ve tried every possible permutation, it seems, and still can’t get it to look like these mockups:

Page Example 1
Page Example 2

So I thought I would just use a solid color footer + a background image at the bottom of the .contentclass div. It came a bit closer (current state of the site) but there’s a gap in the color AND the page content now wants to lay over the top of the grass image.

Yard Ethic Website

Can someone help? I used to build sites from scratch with HTML and CSS, but this one’s driving me nuts!