I need some help with trying to pull of something for a web site. I am not much of a developer, more of a designer. The problem is I have spend half the day trying to figure out how to create a layout that has an image spanned across the whole screen no matter your resolution. But it still needs to be centered no matter what the resolution. Below is a website that shows a perfect example of what i am talking about. Any suggestion as to lead me in the right direction would be a lot of help. I apologize in advance if i have not give enough information as to what i am looking to do. Any help will be greatly appreciated.

So the div spans the width of the viewport, and has a centred background image. It's positioned behind the content by using position:absolute. As this stands, it's a bit odd below about 960px wide, at which point scroll bars kick in and the image is then less wide than the header etc. Adding

min-width:960px

would prevent that.

Firebug (http://www.getfirebug.com/) is invaluable for looking at this sort of thing.

jcbrmn06

03-09-2012, 04:57 PM

Thank you very much! It works like a charm now. I saw that but i must have missed something because I would not get it to work properly. Thanks for the help.

swiper

03-09-2012, 06:34 PM

firebug being invaluable. . . yes, but can it do this that chrome can do??

bring up mayoclinic.com on chrome
f12 for developer tools
Resources
Expand 'frames folder' -- you should see 'images'. . . . click images.
now there's a list of all the images for the page on the left.
and if you click any of them, it will show the image on the right