Image not covering full page?

[Everton]

Hello

I have a large background image which does not cover two squares of about 75px in the left and right bottom corners.

It’s odd because those two corners are governed by a 980px-wide container and a footer width of 100%, so why would they
show up at all?

Which changes would I need to put into effect, please, that apart from the orange strip across the bottom, the background image should cover the entire page without tiling – without looking like a patchwork!

The site is here: Site

Thank you.

[bochristensen]

Try to remove all references to background-image and background-color from body, footer and FooterTwo in your css and add the background image as described in this article https://css-tricks.com/perfect-full-page-background-image/

[Sedana]

The image is covering the whole page but the footer is on top of it and blocking the image so if you remove:

background-color: #333333;

from you footer styling the purple shows up.

[daveontrak]

Have you tried something like this?

body {
background-image: url(../images/purple90.png);
background-repeat: no-repeat;
background-size: cover;
background-position: fixed;
}

[Everton]

Many thanks to you all.

The result of this:

body {
 background-image: url(../images/purple90.png);
 background-repeat: no-repeat;
 background-size: cover;
 background-position: fixed;
 } 

was that the bg image didn’t appear at all except in the footer area – with the square clocks still there, and when I removed background-color: #333333; the page was pushed out to the left for some reason.

I’ll give bochristensen’s tutorial a go!

Thanks again to you all for getting back to me.

Appreciated.

[Author]

Posts