Getting background to reach bottom of screen when displayed on larger monitors

[slev]

Hi i have my webpage html/css and it views perfectly fine on all laptops and smaller monitors but when viewed on a large monitor (20″+) the background dose not go fill past the content area and i am left with a white section between the bottom of my page and the bottom of the browser window. please see image below.

the background image itself is one image comprising of the lighter grey top part and the darker grey bottom in one jpeg, the jpeg is long enough to run off to the bottom of the browser but it seems to be cropped into the content area.

heres the html & css for the background (i have just typed “ALL MY CONTENT” for the forum so its easyier to view but in the document the background div closes just before the closing body tag )

HTML

"ALL my content (JS slider, text icons ect)"

CSS

#getting-started-background	{background:url(../images/backgrounds/getting%20started%20background.jpg); height:100%;}

any ideas?

[gno]

Having background images that big is a no-go.

From what I can see on your screenshot the image could easily be made tileable both horizontally and vertically.

You should crop the image into two parts – one being the darker grey top part which should be applied to #getting-started-background with background-repeat: repeat-x;

The other one, the light-grey, should be set as background on the body element with background-repeat: repeat;. Then it will expand both horizontally and vertically no matter how big the screen gets.

[slev]

thanks gno.

just to clarify would i make the darker top image a very tall thin image the width of just one of the zig zags? also to position it so its half way down the page would i make the image a png with the top half ( above the zig zag ) transparent ?

cheers

[gno]

You’re right about the high and just as wide as the zig-zags top image.

But I do not think that I understand the transparent thing… To do what I wrote you’ll need two images.

The top one should be as high as you want the top to be at its maximum. If you make it 400px high and only want 150px in some cases, you can use the same image, by positioning the background relative to the bottom of the element (using background-position: bottom;). It should be a PNG image, as you want the zigzags to be transparent where they are not light-grey.

The transparent zigzags is important, as you’ll otherwise risk that the top and bottom dark-grey patterns with be unaligned.

The second image could be any format. JPEG will probably be the best considering the size/quality ratio. Any size will do as long as its tileable (meaning, that if you place two of the same image beside eachother, you are unable to tell where the border between the two is) – of course the smalller the better.

Not only is this approach better as it will eliminate your issues on smaller screens, but it will make your images a lot smaller and thus increase loading speed.

[Author]

Posts