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!
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.
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:
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!
You might want to look at this: http://css-tricks.com/perfect-full-page-background-image/
Thanks for the tip. What I ended up doing on my own, which seemed to fix it, was the following:
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.