Z Index And Backgrounds

[Imoddedu]

Hey there, I tried using a z-index thing with css to make the image a background for the webpage, but it isn't working. Is there any simpler way to make in the background of the webpage?http://steamclans.com/index.php

[Ingolme]

Have you tried using the background-image property?Remember that z-index only works if position is set to relative or absolute.And an element can only go behind things that are within the same parent container.

[Imoddedu]

Have you tried using the background-image property?Remember that z-index only works if position is set to relative or absolute.And an element can only go behind things that are within the same parent container.

That kind of worked, but if you look at the webpage now, it doesn't go completely to the bottom.http://steamclans.com/index.php

[Ingolme]

Hmm, the image would repeat if you applied it as a background image and did not modify the background-repeat property.But you should try fixing a few of the HTML errors in the page first:http://validator.w3.org/check?uri=http%3A%...com%2Findex.php

[Imoddedu]

Hmm, the image would repeat if you applied it as a background image and did not modify the background-repeat property.But you should try fixing a few of the HTML errors in the page first:http://validator.w3.org/check?uri=http%3A%...com%2Findex.php

how could I make it so it doesn't repeat and just takes up the whole back page?

[Ingolme]

how could I make it so it doesn't repeat and just takes up the whole back page?

You mean so that the image gets distorted?

[Imoddedu]

You mean so that the image gets distorted?

Well, I mean so like, whenever anybody views the webpage, it covers the whole back, no matter what size the screen is.

[Ingolme]

Well, I mean so like, whenever anybody views the webpage, it covers the whole back, no matter what size the screen is.

You're asking for something really difficult. The problem is that screens come in all proportions and sizes. Some people don't even browse with the window maximized.The closest you can do is have an image with a fixed position, negative z-index and a 100% width/height.(<img src="URL" alt="background image" style="z-index: -1; width: 100%; height: 100%; position: fixed; top: 0; left: 0;">)But the image is going to appear distorted on almost any screen, and older versions of Internet explorer won't show the image on the whole page if the page is longer than the screen.Remember that large images take time to download for slower connections (and even on faster ones if you want an image that takes the full screen)You really should consider a more generic repeating background image.The other option is to have a box with a fixed width and height and have the whole site within it. Then you can use the background image as the background of the box.

[Imoddedu]

You're asking for something really difficult. The problem is that screens come in all proportions and sizes. Some people don't even browse with the window maximized.The closest you can do is have an image with a fixed position, negative z-index and a 100% width/height.(<img src="URL" alt="background image" style="z-index: -1; width: 100%; height: 100%; position: fixed; top: 0; left: 0;">)But the image is going to appear distorted on almost any screen, and older versions of Internet explorer won't show the image on the whole page if the page is longer than the screen.Remember that large images take time to download for slower connections (and even on faster ones if you want an image that takes the full screen)You really should consider a more generic repeating background image.The other option is to have a box with a fixed width and height and have the whole site within it. Then you can use the background image as the background of the box.

Thanks man! It worked!