Background image not lining up with content.

[Ando1]

Ok so im building a mock site for a friend and i have created a bg image and stretched it accross the page and have just used a single slice image to show example content.

all is well untill i preview the site. (using dreamweaver btw) the bg image is fixed however the single image im using to show where the content headers etc etc will go has justted down about 10 px or so. Im a relative newbie to css and have looked at it and its displays the following for the (main_image) tag

main_image {
position:fixed;
top:-50px;
}

i have included an image of what is happening so you guys could maybe help.



thanks

Ando

[teedoff]

An image doesn't show your code.......

A link to your site would be much better.

[Ando1]

sorry,,

here is the site on my test folder.

http://venturidesigns.co.uk/cssforum/test/index.html

[teedoff]

sorry,,

here is the site on my test folder.

http://venturidesigns.co.uk/cssforum/test/index.html

Well I guess a quick fix would be to give #main_image a negative top margin of 8px.

margin-top: 8px;

Seems to work.

I have to ask though, are you working on a huge resolution computer? When I view your page, I can just barely see your menu before the page fold. I mean you created that image with 1066 x 1530 dimensions, which is rather large. Something you might want to address.

[Ando1]

Thanks i will try this..

i have used photoshop to design it and my computer resolution is 1280x800
How would i fix this? i thought it was rather enlarged when i view it.

ps.. im using a resolution of 72 in photoshop

maybe ive been doing it all wrong lol!

and you are right i did set to those sizes.. what would you recomend?

[resdog]

an even quicker fix would be:

[code]
body {
margin: 0;
}
[code]
Add that to your body style.

for sizing...keep in mind that most people's monitor resolution will fit 960 px and no higher in width. If the photo is the most important piece for the client, i think you're OK. If not, you can remove some of the space at the top and shrink the image so that the text become "above the fold", however, the fold is so arbitrary that it's hard to ascribe it to websites anymore.

[teedoff]

an even quicker fix would be:

[code]
body {
margin: 0;
}
[code]
Add that to your body style.

for sizing...keep in mind that most people's monitor resolution will fit 960 px and no higher in width. If the photo is the most important piece for the client, i think you're OK. If not, you can remove some of the space at the top and shrink the image so that the text become "above the fold", however, the fold is so arbitrary that it's hard to ascribe it to websites anymore.

Might be somewhat arbitrary in todays web, but I certainly wouldn't wany my main site navigation to be hidden below the first fold. Thats like having a branding logo hidden behind another page element.