[Resolved] Disable Background passed the footer

[James Wood]

I am working on a website and I want to have a background image that appears only in the main content area. I am using a rather high res image so that it shows up full size even on 4k monitors. The trouble is that I want the image to stop at the footer and I can’t figure out how to do it. Right now the image goes past the footer and it makes the design unappealing. Is there any way to have the background be confined to only the main content area? I am on theme version 1.3.44 and 1.2.94 premium. Thanks for the help.

[Tom]

Hi there,

Any chance you can link me to what you have so far?

[James Wood]

http://allhomecle.com/

I am trying to disable the section of the image that appears under the footer/copyright information.

[Leo]

I think the background image is larger than the page content itself so once you have more page content the copyright bar should be pushed down. If this is all the content you have than it’s best to crop the original image itself to fit the page.

[Tom]

Yea, as Leo said this is happening because your page content isn’t tall enough.

You could try something like this possibly..

html:after {
    content: "";
    width: 100%;
    height: 100%;
    background: #FFF;
    position: fixed;
}

[James Wood]

I knew that the issue was the lack of content, I was trying to compensate for it. Sorry, I should have been more clear. The bit of code you shared did work though so thank you very much!

[Tom]

You’re very welcome 🙂

[Author]

Posts