How to change background Image sizing

1 Views

My URL: http://www.dreambelle.com/
enter image description here
The background image (white main, grey side bar) that is behind the text and sidebar below the slider is placed too low. You can see this issue to the right of the slider behind the side bar content…

The problem is that I cant figure out how to move the background image up via css without moving the entire body content up?
enter image description here
The background image is rendered from a small bar (attached)

Post Views: 1

Related posts

Leave a Reply

2 comments

  1. You need to do both (make the #featured_body with a smaller height), and adjust the margin on the #sidebar

    Ive tested the following this works for me in FF5:

    // Remove 10px from the #featured_body height
#featured_body {
    background: url("images/bgr_board.png") repeat scroll 0 0 transparent;
    float: left;
    height: 356px;
    margin: 0 12px;
    padding: 0;
    width: 618px;
}

// Add 10px to the sidebar top margin
#sidebar {
    float: left;
    height: auto;
    margin: -375px 0 20px;
    padding: 0;
    width: 332px;
}

  2. This is happening because your div#content, which has the background-image is placed below your div#featured_body, which is pushing it down.

    You have two choices, as I see it:

    1. make the div#featured_body smaller height-wise, so that the bg image lines up with the twitter div or

    2. place anther wrapper div around all the content under the nav and add the background-image to that. (That is, if you wanted the bg-img to stretch to the top of the page).