Background image for Chris's personal home page demo? - CSS-Tricks

This topic is empty.

Viewing 3 posts - 1 through 3 (of 3 total)

Author

Posts
September 29, 2008 at 6:36 am #23326

danimal
Member

Greetings.

I’m quite a newbie with CSS, so hopefully this question has an easy answer.

I have been creating a WordPress site using Chris’s example personal site (Screencasts 25-27). I’ve found these tutorials to be great learning tools. Thanks, Chris!

I’d like to use this template and have a different background image fill the entire "content" part of the page (a repeating .png or .jpg between the navigation bar and the footer). I’ve had no luck in doing this so far.

First, I tried changing the background images of various <div> tags. Sometimes that gave a background to parts of the page, and sometimes broke the "keep-the-footer-at-the-bottom" feature.

Next, I tried nesting the whole page (just after the <body> tag) within another <div>. This filled the entire page’s background with the new background image, making the navigation bar unreadable. I experimented at length with various absolute and relative positioning settings, with the same results (I mentioned that I wasn’t very good with CSS, didn’t I?).

Finally, in a stroke of brilliance, I decided to switch the background images and load the "content" background in the <body> tag’s CSS, and then load the navigation background within the next nested <div> that I created. Since the new <div> encapsulated the page-wrap, which encapsulated the navigation functions, I was sure it would work. As you might have guessed, it didn’t. The navigation background still wasn’t visible.

Now I’m stuck. If anyone has any ideas, I’d love to hear them!

Thanks,
Dan

September 30, 2008 at 9:54 am #50214

danimal
Member

Thanks. I’ll post a link as soon as possible. Meanwhile, my ISP has forwarded incoming http requests to another customer. (?!)

October 5, 2008 at 5:43 am #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:
    
    Code:
    
    function get_page_section()
    {
    global $wp_query;
    $cached_page_id = $wp_query->get_queried_object_id();
    echo get_post_meta($cached_page_id, “section”, true);
    }
    
    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/
Author

Posts

Viewing 3 posts - 1 through 3 (of 3 total)

The forum ‘CSS’ is closed to new topics and replies.