WordPress.org

Ready to get started?Download WordPress

Forums

[resolved] CSS help - full browser width background with defined width body (3 posts)

  1. siriusly
    Member
    Posted 1 year ago #

    Greetings... hope I'm posting this in the correct place... please correct me if not. Couldn't find a specific CSS WP forum.
    I am seeking a little CSS help for defining a full browser width background that extends only to the top and bottom of the body div. The page display is limited to the center 960 pixels of the display window. So far, I can make one of these things work properly, but not both at the same time.

    There's a screenshot of what I am trying to achieve here: http://sirius.johnsoncreative.com/lam/wp-content/uploads/comps_marked.jpg

    I'd also welcome a recommendation for a theme that I could build this on and/or create a child theme for.

    Many thanks!

  2. Max
    Member
    Posted 1 year ago #

    You have to use multiple divs to achive that... a structure something like:

    <div id="header-container">
      <div class="content-wrap">
          <!-- header stuff -->
      </div>
    </div>
    <div id="content-container">
       <div class="content-wrap">
          <!-- body stuff, content, loop etc... -->
       </div>
    </div>
    <div id="footer-container">
       <div class="content-wrap">
          <!-- footer stuff -->
       </div>
    </div>

    and css like:

    #header-container,
    #content-container,
    #footer-container {
      width: 100%;
      overflow: hidden;
    }
    #header-container {
      overflow: visible; /* so the menu can fall into the div below */
    }
    #content-container {
      background-color: #xxxxxx; /* whatever that color you want is */
    }
    .content-wrap {
      width: 960px;
      margin: 0 auto; /* center the content in the browser window */
      overflow: hidden;
    }

    You can probably custom write a theme like this really easily...

  3. siriusly
    Member
    Posted 1 year ago #

    Awesome. Thank you clementsm! It was the content container piece with the nested body content div that I wasn't getting. I usually start with something like Starkers, so this will work great! Thanks again.

Topic Closed

This topic has been closed to new replies.

About this Topic