Hi there, Having a little problem trying to correctly get my background image to just stretch the entire length of the page (it is coming up short) I dont want it tiled, I just want it to be for the whole page? I hope this makes sense.. This is what I have so far... body { margin:10px; padding:5px; background-image: url(/greenabstract.jpg); background-repeat: no-repeat } Any help would be great!!
Read your post wrong... Position your image if you dont want it tiled. Everyone uses different resolutions, the best thing to do would also be to include a background color in your declaraction just to be on the safe side. You could also specify width/height?
provide a live URL and I can give you an answer. Without seeing your code in context it's hard, your explanation of your problem is quite vague and I could provide several answers
Unfortunately the background image is only going to be as large as the image itself. If the container is not wide enough to contain it, then you won't see the whole thing. If the container is larger than the image, then you'll see the image repeat across the page (unless you prevent it from tiling, in which case you'll see just the image and the background color underneath it). You basically have three options - tile the image, make the image larger, or make the container equal in size to the background image and then use the overflow property to set the contents of the container to scroll when appropriate.
Dan is for the most part correct on this, BUT, there is a fourth option that would do exactly what is desired... though it's a bit tricky. Using the position:fixed emulation 'trick', then absolute position an image tag in the upper left, then fixing it's width and height to 100%. It's ugly, but it works (and is the only way to do this I'm aware of) - I'll toss together an example of that.
... and here it is: http://battletech.hopto.org/for_others/AngelaR/template.html the directory: http://battletech.hopto.org/for_others/AngelaR is unlocked so you can grab the gooey bits easier. Validates XHTML 1.0 strict, works in IE 5.5, 6 & 7, Opera, Safari and Firefox. It uses a trick to 'fake' position fixed, something that you do not have available normally in IE - this trick works in all browsers, and lets us position/place the image. Anything outside #container is treated as position:fixed and will not scroll - anything inside #container will scroll. Pretty simple. As noted in the text on that page, the image will NOT preserve aspect ratio... You should also be aware that it will pixellate REALLY badly (which is why stretching images are usually avoided on web pages in the first place)