Image as page banner?

Client wants image to span width of page

[mightymid]

I'm freelancing a very simple site and have a layout dilemma.

Client wants a wide, horizontal image to span the entire width of the page -- at the top, sort of like a banner.

His users will be viewing at a variety of screen resolutions, including 800x600. Therefore, I assume the image width should probably be slightly under 800px so that it fits in the window (without horizontal scrolling) for the 800x600 folks.

BUT at a higher resolution, the image obviously will not span the entire page if it's barely 800px wide.

How would a request like that be handled?

Many thanks,
Mid

[D_Blackwell]

If the graphic design lends itself to it, you can center the image in a <div>, and give the <div> a background-image/color that will blend into the graphic. (Sample the colors in the graphic to get a matching hex#.) It will look like a full width image. It could also look hacked. You'll have to play.

[yowza]

You could detect the screen resolution and deliver different images based on resolution.

[kodaks]

You could also simply plave <center> tags on the banner, so on any resolution it will appear to be centered. It will look fine that way to any screen resolution.

[shinyblue]

I've seen this done. The site had an image across the top sized 1430x130. It was a CSS site so they used this code:

#banner {
background-color: #ffffff;
background-image: url('http://domain.com/image.jpg');
background-position: center;
height: 130px;
margin-bottom: 20px;
padding: 0px;
}

The image was a panorama, so it didn't much matter that some sites would only see the middle 800 pixels. And since it was in the background layer, it didn't stretch out the site at all width-wise like putting it in a table would do.

You'd run into problems if someone viewed it from a screen larger than 1400x1050 resolution though.

[shinyblue]

Oh, and then in the HTML they just put this:

<div id="banner">
<br />
</div>

[benihana]

id second what d_blackwell says.

its a technique that works very well for me on a number of sites, and, if done correctly, will look seamless.

[Leosghost]

In the attributes set width 100%