Jump to content

Z Index And Backgrounds


Imoddedu
 Share

Recommended Posts

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.

Link to comment
Share on other sites

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 Edited by Imoddedu
Link to comment
Share on other sites

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

Link to comment
Share on other sites

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?
Link to comment
Share on other sites

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. Edited by Ingolme
Link to comment
Share on other sites

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! :)
Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share

×
×
  • Create New...