Member Avatar for 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.

Edited by mike_2000_17 because: Fixed formatting
  • 4 Contributors
  • 4 Replies
  • 99 Views
  • 22 Hours Discussion Span
  • Latest Post Latest Post by sbmzhcn

Dani AI

Generated

— the background placement problem is usually a layout issue, not an image one. Applying a page image to an element that does not fill the viewport while the rest of the page is positioned absolutely will make the visual "center" shift. 's point about small syntax mistakes and 's point about how positioning affects background placement are both relevant; modern fixes make the intent explicit and avoid fragile absolute layouts.

A simple, modern way to keep the image centered and scaled across viewports is to let the background scale to the viewport and ensure the page area fills the screen. For example:

body {
  min-height: 100vh;
  background-image: url("logonew.jpg");
  background-position: 50% 50%;
  background-size: cover;
  background-attachment: fixed;
}

Notes: background-size: cover fills the viewport but can crop edges; contain keeps the whole image visible but may leave gaps. min-height: 100vh ensures the element used for the background spans the viewport height on modern browsers.

Also consider removing absolute positioning from the main page structure. A flow layout or a simple Flexbox wrapper makes horizontal centering predictable and avoids hard offsets:

.page-wrapper {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  max-width: 1200px;
}

Troubleshooting checklist (quick): validate the CSS for syntax errors, confirm the stylesheet and image URL load (HTTP status), inspect the computed background values in browser DevTools, and temporarily add a visible background-color or outline to see the element that holds the image. Small cascade or specificity conflicts can override rules, so verifying the final computed style is the fastest way to see what the browser actually uses.

Recommended Answers

All 4 Replies

Member Avatar for 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.

Edited by Dragennd because: typo
Member Avatar for 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.

Member Avatar for 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.

Member Avatar for sbmzhcn

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

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.