How can I make this background image fit to the bottom of my page

Question

I'm working on a site with a scaleable background image that fits the browser window, but am having issues when viewed on small browser windows.

When the page loads initially on a tall browser window, the image correctly anchors to the bottom of the browser window, and scales when the window is resized - ie, when the whole page is contained it's fine. However, if the page length exceeds the initial window height, when the page is scrolled, the image scrolls up, leaving a gap.

Here's a page to demonstrate (try it with tall window first, then short window, refresh and scroll down to see the problem):

http://kevin-atkins.co.uk/slc/about-us.html

How can I get the background image to fit to the bottom of the browser window and/or not leave a gap when scrolling?

Answer 1

You need to specify a width\\height so that it can resize itself correctly.

Seeing as you have used css to set the background, you can use CSS3 Background Size. Most modern browsers support it, like follows:

#about-us {
    background-size: 100%;
}

Alternatively, you can use an image tag and style that correctly (width\\height) which takes up 100%

Reference:

• Background Size https://developer.mozilla.org/en-US/docs/Web/CSS/background-size

Hope this helps.