background image not filling window

Question

Hi All,

I'm creating a pop-up with a background image from CSS as below

#gui-01-Qa {
background-image:url(path/to//file.jpg);
background-repeat: no-repeat;
background-position: top left;

}

This all works fine apart from (what looks like) a boarder of approx 5px being added. It's not coming from my code, but both IE and Firefox are adding it. So whet's it coming from ????

Any ideas would help Many thanks Giles

Answer 1

That border is most likely a padding or margin on the body element. Just add html, body { margin:0; padding:0;}, or use a CSS reset.

If you're wondering how to stretch a background image to fill the entire window regardless of resolution while preserving the aspect-ratio A List Apart recently published a very good article on the subject.

Answer 2

Maybe the element with your CSS ID "gui-01-Qa" is causing the border. Try to set margin and/or padding to 0.