[Resolved] inconsistent view of footer and background image

[Tali]

Hi,

Hoping you can help.

1) the footer is showing correctly on all pages except the “other misc. wildlife” link under Photography – it is correct on all other pages
2) the background image is showing correctly on all pages except “About”, “Featured Works”, “Home”, and “Waterbirds” (this one under Photography) – note there are two “columns” that show correctly on all other pages, but on these, you only see the one on the left – I can’t figure out why?

In advance, thanks!

[Ying]

Hi Tali,

1. Do you mean the footer on that page is not at the bottom of the screen? If so, that’s normal behavior as that page doesn’t have enough content.

2. That’s because the About page has more content than other pages, the background image size is set to coverwhich means, it needs to stretch to coverthe entire page length. Try setting the background image size to contain.

Let me know if that works 🙂

[Tali]

Hi Ying,

1) other pages have only one line of images and are correct – this is the only one that is not – seems strange

2) I tried setting to “contain” and it messed up the pages that were correct. I also tried 100% and that was horrible as well. I’ve checked all pages and the settings are the same – another “odd” thing – but if I have to live with it, would rather keep as “contained”

Other possible thoughts?

Thanks

[Fernando]

Hi Tali,

1. Which other pages are you referring to? I’ll take a look at them.

In any case, you can also try adding this CSS in Appearance > Customize > Additional CSS to make sure that the footer always sticks to the bottom even if the content of the page doesn’t reach 100% of the height of the browser:

div#page {
    min-height: calc(100vh - 226px);
}

2. Yes, if you set it to cover, the background image would stretch depending on the size of the page. So, the more content a page has, the more stretched the background image would be.

Setting it to contain should result in the most consistent look. Try to make the image’s top and bottom identical in terms of look so that when the image repeats in the background, the connection of the image would be seamless.

Hope this clarifies!

[Tali]

Hi Fernando,

Thanks! Halfway there ….

1) added the CSS and now fixed 🙂 (One page only didn’t have it sticking to the bottom, but all others were fine – now all are fine)

2) yes, indeed contain is the best – the issue is not with the height – it’s the way the width is showing. If you go to the Photography or Digital Art page – the width is showing correctly – you will notice what looks kind of like columns on the left and the right of the page. This is the background image uploaded. Now look at the About or Featured Works page and notice you see a wider column on the left – but no column on the right. The “background image” for pages is the same. I’m not sure why it looks different.

VBR,
Tali

[Fernando]

1. Glad it’s fixed now.
2. The height affects the width of the image as well. As the height of the image increases, the width of the image increases as well, making it look more stretched horizontally in other pages. Right now, from my end, the background image is still set to cover. As mentioned, setting it to contain would result in the most consistent look.

Hope this clarifies!

[Tali]

Thanks Fernando,

I have it on contain now – look at the Digital Art page – completely wonky with the right column nearly in the center of the page – on the photo page, extra wide on the right – inconsistent .. it fixed the home and about pages, but messed up the ones that were previously ok … is there another way to fix?

[Fernando]

I see. Can you try adding a position value? For instance, add center top.

If that doesn’t work, try adding this CSS as well:

body {
    background-size: 100%;
}

Kindly let us know how it goes.

[Tali]

Thanks Fernando,

The CSS did the trick. (Yay!) I noticed a seam in the vertical on the longer pages, and updated the background image to a 2×3 ratio, and that solved that issue.

All fixed – thanks so much!!

VBR,
Tali

[Tali]

Thanks again, marking resolved 🙂

[Fernando]

You’re welcome Tali! Glad that worked! 🙂

[Author]

Posts