Forums

The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home Forums CSS Background image for Chris’s personal home page demo? Re: Background image for Chris’s personal home page demo?

#50327
danimal
Member

Hi all,

I finally have my website back up so I can post a link to it. In the mean time I figured out how to solve the problem (trial-and-error is often the best teacher). Here’s the/a solution, if anyone else is interested:

Chris’s WordPress theme started off by encapsulating the entire page within a 960-pixel-wide "page-wrap" div. The top bar, logo, and navigation bars were all nested inside the same div tag at the top of the page, followed by the body "lower-wrap."

The navigation could extend to the edge of the browser window because it was drawn using the page’s body background image as a horizontal repeat. Thus, the following ways of adding a div background could not work:

  • Encapsulating the page-wrap inside another div 100% wide: This covers over the body background.[/*:m]
  • Changing the background of the page-wrap: This covers over the body background for the middle 960 pixels.[/*:m]
  • Switching the body background and nav-bar backgrounds: This only changes the middle 960 pixels.[/*:m][/list:u]

    So the solution:

    • Create a nav-wrap to encapsulate just the navigation area: { width: 960px; margin: 0px auto; height: auto; }[/*:m]
    • Create a wide-wrap with a width of 100% to start immediately after it. This will contain your background image.
      { width: 100%; top: 107px; height: auto !important; margin: -3px auto -250px; }[/*:m]
    • Move the page-wrap div to fit inside of that. This keeps the rest of the content centered within 960 pixels.[/*:m][/list:u]

      You could stick the background image right inside the CSS for the wide wrap, but I wanted it to change based certain sections of my website. To make my background dynamic, I call the wide-wrap div like this:

      Code:

      Now add a custom field called "section" to your page/post/section. Call it the name of a new pseudo-class that has your background image (and any other customizations for that page/post). Now you can select your background when you publish from inside WordPress. Note: there’s also a plugin called "Classybody" that is even more customizable.

      The link: http://johnson.dan.name/. Some pages have backgrounds and others don’t.
      Chris’s link (similar to the original theme): http://chriscoyier.net/