CSS Background Image: Bottom of Page

Question

On my website, I have 3 background images applied to the body element (to give the impression of top, left and bottom borders) like so:

body {
    background: url('../image/body-x.gif') repeat-x 0 0,
                url('../image/body-x.gif') repeat-x 0 100%,
                url('../image/body-y.gif') repeat-y -280px 0;
    background-color: #47b48e;
}

This displays fine most of the time as the pages are quite long. But on shorter pages — such as the 404 template http://www.mattpealing.co.uk/asdfadsf — body-x.gif isn't sticking to the bottom of the page, like so:

enter image description here

I've tried adding the following code (I've read numerous times in the past that this is a common solution):

html, body {
    height: 100%;
}

But I can never get that to work. It still doesn't appear at the bottom, and instead it breaks it on the other pages. Such as on the About page, the bottom border image is overlapping the body copy like in this screengrab:

enter image description here

Can anyone see what I'm doing wrong?

it looks like the background-image is having a solid color so why not a background-color — Vitorino fernandes, Dec 29 '14 at 16:59

score 0 · Accepted Answer · edited May 23 '17 at 11:50

0

Try:

html, body { min-height: 100% }

From: Make <body> fill entire screen?

As an aside, what if you used a white top and bottom border on the body and only used the background image for the left white space? This would make the code simpler and cut down a couple unnecessary HTTP requests.

edited May 23 '17 at 11:50

Community

1
1

answered Dec 29 '14 at 18:33

Darren

1,097
10
9

thanks! That seems to work nicely. Also I didn't even think of setting the top and bottom as borders! I've done that but now strangely I'm back with the original problem on the 404 page layout... it seemed to work fine with the images in there though and the `min-height` property! – Dec 29 '14 at 20:48

CSS Background Image: Bottom of Page

1 Answers1