View Full Version : A tricky web layout

03-09-2012, 04:30 PM
Hey guys,

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.


03-09-2012, 04:45 PM
That page has a div:

<div id="photo" class="photo3"></div>

with this css:

body.mymayo #photo.photo3 {
background: url("../img/photo_3_1.jpg") no-repeat scroll center top #FFFFFF;
body.mymayo #photo {
height: 400px;
left: 0;
position: absolute;
top: 130px;
width: 100%;
z-index: 1;

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


would prevent that.

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

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.

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
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

dont matter if the image is on some subfolder