Dave_smith
Posts: 6

I am struggling to get to grips with a layout issue regarding mastheads/banners.

It seems easy enough to design a graphic to use as a masthead to fit a particular size. But when this is viewed on a monitor which is set to a different pixel size then either the page will have to be scrolled or will not fit the whole of the page.

How to get a masthead that that is capable to being viewed with the whole width of the screen irrespective of how the montor is set? Setting the graphic to a percentage will surely cause some distortion.

I'm thinking that the trick is to have a graphic set again a background colour that matches the graphic. But is there a better way?

Thanks.

Dave

Joe Gillespie
Posts: 528

Dave, you are correct about not resizing a graphic, that will look very nasty.

As you have worked out for yourself, you need to use a background colour as the stretchy bit and place sliced-up parts of the masthead (preferably as transparent GIFs) across the masthead. You can use a table or CSS, whatever you are more comfortable with.

Dave_smith
Posts: 6

Thanks for that confirmation that I was on the right track.

Baxter
Posts: 157

If you can figure it out... and it requires a bit of familiarity with a lot of things, scalable flash replacement if a VERY interesting solution to your problem:
http://www.mikeindustries.com/blog/archive/2004/09/sifr-2.0b2-mo-betta-beta

Joe Gillespie
Posts: 528

One idea is to use a div and style it with a background image. That way it'll fit a wide range of screens. Eric Meyer does this for his header.