css question

[loloy123]

This may seem obvious to some people but Im only new to css so still learning :) Im creating a site with a background image i made in photoshop, I have links at top center, a slideshow underneath that centered, text again underneat that centered and then my footer.

#container {
    position:absolute;
    top:0%;
    left:0%;
    width:100%;
    margin: 0 auto; 

}

#links {
    position:absolute;
    top:40px;
    width:40%;
    left:30%;
    height:10px;
}

#main {
    position:absolute;
    align:center;
    width:80%;
    color:#CCC;
    top:100px;
    height:800px;
    left:120px;
}

#footer {
    position:absolute;
    width:80%;
    bottom:50px;
}

#p {
    text-align:justify;
    font-family:Verdana, Geneva, sans-serif;
    font-size:14px;
}

#h3 {
    font-family:Arial, Helvetica, sans-serif;
    font-size:24px;
}

body 
{
    background-image:url('logonew.jpg');
    background-repeat:no-repeat;
    background-position:center center;
    background-attachment:scroll;
} 



IMG.displayed {
    display: block;
    margin-left: auto;
    margin-right: auto 

}

However, my background image does not center or nothing - it is not positioning as i want it to be - centered. Have I gone wrong in the code somewhere???? thanks. Louise.

[Dragennd]

I've never had problems trying to center images because I always had pictures bigger than necessary, one thing you might try is adding a semicolon to the last line of your css

IMG.displayed {
display: block;
margin-left: auto;
margin-right: auto

}

I'm not sure if that will help but you never know. Also for vertical positioning you can't say center, you have to say middle.

[drjohn]

You never need a semi-colon after the last declaration, before the closing } - it's a weird rule, but it's true. However it's good practice to add a semi-colon, in case at a later stage you add another bit, as then the lack of a semi-colon will cause things to go wrong.

[drjohn]

background-position:center center;
puts the center of the image in the position that corresponds to the center of the content, and vertically if you have a page with two lines, the vertical center is half way between the two lines.

So the trick is to tell the browser that every page is full of content, by adding this line to your body styles:
height:100%;

PS absolutely positioning a 100% wide container to 0,0 is identical to setting border:0; padding:0; for the body (a VERY common way to start the style sheet) and then no using position:absolute at all.

[sbmzhcn]

background-positon:50% 0;
------
rock crusher