Auto Fit Background and Put Text On It

[t3553r]

I'm trying to create a page that has a background image that auto fits to the browsers size...This way all resolutions are accounted for....The background image is 1300x2000....I was able to do this using the following code

#background {
width: 100%;
height: 100%;
position: absolute;
left: 0px;
top: 0px;

The problem is that now when I put text over the image it moves based on the screen resolution, or the browser zoom.

I want to be able to put the text over a picture of a bubble on the image and have it stay in the bubble no matter what the resolution is. Any ideas?
z-index:0;
}
.stretch {
width:100%;
}

<div id="background">
<img src="images/about.png" class="stretch" alt="" />
</div>

[swa66]

You'll need to use absolute positioning to put the elements over that background jsut as well. Use the %value on the left/right/top/bottom to point them where they need to go.

The hardest part will be to scale those elements as well.

I'm afraid you'll be pushing the limits soon with this.
I'd rely more on the zooming of the browser instead of the scaling of images to be honest (esp. with the horrible scaling algorithm used in IE).

[t3553r]

Basically I just want someone who is using 800x600 resolution to see the same things in the same positions as someone who is using 1024 x 768 or greater....I tried percentages for placement still doesn't work....please provide an example