100% height with .png

[Boot Straps]

Hello,
How do I get the background image to be 100% height. My image is 700px height and 20 px width and is Linear on the height side, so no repeat for y. I read http://www.sitepoint.com/forums/show...ghlight=height but it did not work for me.

Thanks for any help
Boot Straps

[Buddy Bradley]

You can't stretch a background image; the only way to get it to be 100% high is to tile it vertically using "repeat-y".

[whintersby]

One way you could achieve this is to have a further wrapper div that contains your entire page. If you then make this 100% height and width, drop it below (z-index wise) the rest of your page, and then add an image inside this div that has 100% width and height applied. This will make the image re-size according to the size of the wrapper div (and therefore the browser size) - but I'd imagine the results to look a little strange with the images dimensions being pulled and squashed...

[Boot Straps]

whintersby,
Can u give an exmple of the 'z-index' thing.

What about this: A table height = 100% with all 4 margins = 0px.

Or: A Linear background image and under it, a background color to fill where the image is not.

Im new to CSS but want to learn.

Thx,
Boot Straps

[all4nerds]

Hello

a blast from the past

absolute positioned containers and 100% high images left and right

2 indians

[Boot Straps]

all4nerds,
I like the 2 indians page, but want I want it to do is 100% high even when you need to scroll down the page. Is that possible?

[Paul O'B]

Or: A Linear background image and under it, a background color to fill where the image is not.

If you just want a background fade then apply the image to the body.

e.g.
http://www.pmob.co.uk/temp/gradient2.htm
http://www.pmob.co.uk/temp/bgimages.htm

If you don't want the fade to repeat then just change the repeat to repeat-x and then the background colour will be applied at the end of the image (assuming you are doing a fade into background effect.)