image size

[Jay_Rod]

Quick question am hoping for some help.
I want to use an image for the header of a site. The problem different screen resolutions. In 1024x768 I can fit the image fine also in 800x600. I want to know how I can make the image resize for different resolutions. or if I have to fit it to a smaller resolution and just allow the table to resize itself around the pic. for higher res. I want the site to resize for different res. rather than constrain it to a particular one. The reason is because it has some layers in it. if my first request is not possible the next question would be would I use position:relative vs. position:absolute for the layers so that they don't get misaligned in different resolutions? Thanks so much

[limbo]

You can set the image to have a % although I do not know how compliant that attribute is and they will distort more the larger the res.

Alternatively you could place the image in a table set to 100% then fill the background the with the colour of part of you image so it blends from image to background.

Another trick I use on one site is to place the image in the background of a table cell,then repeat the image as a mirror on the next cell and set it to 100%. This will only work on 'banner' type images but can look very tasty.

[chadmg]

Something else you should consider is that window size isn't the same as screen resolution. I have a large screen resolution and I don't usually maximize my browser. Plus, you can have additional menubars and toolbars on the sides like with netscape and opera. Of course, you can determine the window availWidth and availHeight in javascript and either let the browser resize your graphic or have your server give them a different graphic, or use a percentage width and height. But also remember that someone can resize the window after the page is loaded, so take that into consideration as well.

It's hard to advise you on using absolute or relative positioning without seeing what you are doing. It depends on what you want to do and what you're criteria are. If you want to allow someone with 800x600 res to view your website without horizontal scrolling then don't absolute position something that would appear outside of that viewing area.

[Jay_Rod]

The layers are being used to place images on a side navbar. when the window is resized the images do not. I think that I will probobaly not use layers for them as it is not nessecary