[Resolved] footer has moved up when using background image on page

[Mark]

I (think) I have succesfully applied a background image to some of my pages on new.nimblethimble.com

However, on the three pages where it seemed to work (About Us, Calendar, and Get in Touch), the footer has moved up away from the bottom of the page. Can I make it stay down like it was before I applied a background image?

Also,

Is there some special procedure I need to use on the News (blog post) page as it is not responding to the page background image?

Thanks,
Mark

[Leo]

Hi there,

The footer has moved up in About page as there isn’t enough content to fill the length of the page.

There isn’t a Calendar page and the Contact page looks fine as there is enough content.

How are you adding the full container class currently? Any reason you could just apply the background image to the body of the desired pages?

Let me know 🙂

[Mark]

Hi Leo,

Thanks for getting back to me. I am using Tom’s technique of setting the full container by putting

in the before_header hook and putting

<!– .full-container –> in the after_footer hook. Is there another way that might be better?

To get “more content” into the page, should I add a bunch of <br /> to push the footer down on pages that are not long enough?

Lastly, is there a reason my technique is not working on the blog page?

Thanks

Mark

[Mark]

Actually, adding <br /> didn’t help, but adding   worked.

[Leo]

Looking at your current setup, I don’t believe the full-container method is needed.

Can you temporarily disable that method and try this CSS instead?

body.page-id-60, body.page-id-10, body.blog {
    background-image: url(http://URL-HERE);
}

The CSS above is targetting the About Us, Contact and News page only.

Make sure it’s added in the global CSS editor.

Let me know 🙂

[Mark]

OK, I will give that a try.

Mark

[Mark]

Leo,

I put that CSS into Customize | Simple CSS, and removed the hook elements, but it seems that there is no page background now.

Mark

[Mark]

Nevermind – I made a typo. Seems to work fine.

Thanks
Mark

[Leo]

No problem 🙂

[Ivan]

I found a Video that describes this problem we often have with themes here it is stop a footer from floating up Can you guys from GeneratePress add this as theme option to OP ? Thanks

[Leo]

Thanks for sharing.

We will definitely consider it 🙂

[Ivan]

Thanks Leo! Is there any workaround for now with CSS I would be so happy if you could share it here how to fix it for now?

[Leo]

Any chance you can start a new topic and link me to the page in question?

[Ivan]

I have added now a new Post. Thanks

[Leo]

Thanks 🙂

[Author]

Posts