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!
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:
So the solution:
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:
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.
You must be logged in to reply to this topic.
*May or may not contain any actual "CSS" or "Tricks".