Best solution wins $50 via Paypal...

Use percentages. Measure the percentage of the background image to where you want the text to start and change the text's margins accordingly.

The link really doesn't show anything resizing at all are you sure you posted it correctly?

Thank you. Percentage is what I've tried, but I must be using it wrong.

I double checked the link and it's loading fine.

PJ

What part is supposed to be resizing??

If I understand your question correctly, your wondering how to position the three elements/divs independantly? if so, the easiest way to position your images and text is to uses the Absolute positioning from your CSS to position your Images and text by the number of pixels from the top of the window and from the left of the window. For example(a crude one at best).. in your CSS

#h1 {
position: absolute;
top: 120px;
left: 120px;
}
#headerBar {
position: absolute;
top: 117px;
left: 120px;
}

#image {
position: absolute;
top: 200px;
left: 120px;
}
If this is not what you are asking please clarify so that I can assist you...

Easiest does not equal correct. I'd never suggest positioning a text container (or anything scalable) with absolute positioning. Besides pixel values measured from the top and left do not address the resizing background issue.

I really wish the OP would remove the $50 prize. It's unnecessary, distracting and will attract bad advice.

I'm still not seeing anything resizing in the link. I guess I just don't really know what you're after. Personally, I'd just center everything horizontally and not allow the background to scale.

Absolute positioning is not going to work for this.

As for resizing the image... if you check the last information in the url you will see &width= and &height= change these values to reflect a browser size, hit enter, and watch the image resize..

But that's where I'm stuck. Would like to know of a good way to resize the text as well and reposition it to stay relative to the background image.

Thoughts anyone?

Thanks.

PJ

All I see is

Warning: imagecreatefromjpeg(illustration/images/1eye_bolt_markings.jpg) [function.imagecreatefromjpeg]: failed to open stream: No such file or directory in /home/xsprotem/public_html/test/index.php on line 256
 
Warning: imagesx(): supplied argument is not a valid Image resource in /home/xsprotem/public_html/test/index.php on line 259
 
Warning: imagesy(): supplied argument is not a valid Image resource in /home/xsprotem/public_html/test/index.php on line 260
 
Warning: Division by zero in /home/xsprotem/public_html/test/index.php on line 265
 
Warning: Division by zero in /home/xsprotem/public_html/test/index.php on line 266
 
Warning: include(illustration/1eye_bolt_markings.html) [function.include]: failed to open stream: No such file or directory in /home/xsprotem/public_html/test/index.php on line 276
 
Warning: include(illustration/1eye_bolt_markings.html) [function.include]: failed to open stream: No such file or directory in /home/xsprotem/public_html/test/index.php on line 276
 
Warning: include() [function.include]: Failed opening 'illustration/1eye_bolt_markings.html' for inclusion (include_path='.:/usr/lib/php:/usr/local/lib/php') in /home/xsprotem/public_html/test/index.php on line 276

Thanks all for your help and time.

I finally figured this out.

For the text it was a matter of starting with a text size that fits over the original image size and then resizing the text with the same percentage I am resizing the image.

As for positioning the content the solution was similar.

Once again thanks all for your help.

PJ