Background image – resizing window issue

[Hobag_Beasty]

Hello, brethren!

I have a background image intentionally set somewhat off the bottom of the page. This, so that there is no gap between it and the bottom of the browser window. It’s coded thus:

body
{
background:
url(without_face_666high.png) 20% 180% no-repeat fixed;
}

Works perfectly fine until you ‘Restore Down’ in Chrome, for example (shrink your window). Then a gap appears between the bottom of the image and the bottom of the page that only gets bigger the smaller you resize the window.

I suspect there’s a simple fix for this that’s just beyond my newbie skills. Any help will be appreciated!

[Paulie_D]

You might want to look at this: https://css-tricks.com/perfect-full-page-background-image/

[Hobag_Beasty]

Thanks for the tip. What I ended up doing on my own, which seemed to fix it, was the following:

body
{
background:
url(without_face_700high.png) 20% 100% no-repeat fixed; background-size:contain;

}

It’s a bit of a cheat. I redid the image to include some transparent space in the png (went from 666 to 700 in height). Then used contain. Seems to work on the resize now.

[Author]

Posts