the working simplicity on different background images for different pages

  • After so many days of reading through xx posts and comments on anything related to WordPress themes modifications and the frustration over so many people and posters that either posted for old versions without anywhere naming the version or that posted scetchy bits and pieces, incomplete garble and so on, i finally found out how this works in WP3+, cross browser, simple and easy actually.

    Different background images on different WordPress pages
    works like this:
    1. step
    In your WordPress > Apearance > Editor
    locate the header.php (most likely the BODY tag for your theme is in there, if not you most likely find it in page.php)
    Now change
    <body> (or whatever else is inside it) to
    <body <?php body_class(); ?>> (if there where other commands already to the body tag leave them in it and just ad <?php body_class(); ?>

    That’s it for the PHP files, hit the “Update File” botton.

    Now load your WordPress site in a seperate window and open each page you want to assign a different background image (this would also work for header image etc.) to and check the source codes body tag.
    You now find stuff like this:
    <body class=”home page page-id-7″>
    <body class=”page page-id-2 page-parent”>
    <body class=”page page-id-4 page-child parent-pageid-2″>
    instead of just the good old <body> tag.

    What we need from these body classes is the page ID, hence
    page-id-7
    page-id-2
    page-id-4

    Real life example is here: https://astroberatung.cz.cc (don’t worry about the current look and lack of contents, i had to get this different background images working first and just finished that tonight)

    Now you need to find the right css file to alter.
    usually that would simply be style.css
    but not all Themes are alike, and some Themes may even offer the option of CSS overrides within their own Theme options pages, if you have one of these i recommend using that override option to enter your new lines of CSS code, just in case you need to update the Theme later on.

    Okay, lets go back to style.css.
    In my case i assigned the background image to the body tag – all though it’s used like a header image, that’s just because i found this at present easier to do.

    Here is the CSS:

    body.page-id-7 {
    background-image: url(‘https://astroberatung.cz.cc/wp-content/themes/winter-red-10/images/astro-zodiac-on-our-solar-system.jpg&#8217;);
    background-repeat:no-repeat;
    background-position:left top;
    background-color:#00c40e;
    }
    body.page-id-2 {
    background-image: url(‘https://astroberatung.cz.cc/wp-content/themes/winter-red-10/images/partnerschafts-beratung.jpg&#8217;);
    background-repeat:no-repeat;
    background-position:left top;
    background-color:#00c4de;
    }
    body.page-id-4 {
    background-image: url(‘https://astroberatung.cz.cc/wp-content/themes/winter-red-10/images/ortsbezogene-astrologie.jpg&#8217;);
    background-repeat:no-repeat;
    background-position:left top;
    background-color:#b0c4de;
    }

    That’s it for the CSS file, hit the “Update File” botton.

    I am not sure if 1-line CSS would work just as well, or just the image file name alone, i have tried so many variations that did not work that i finally left it this way because this works in all browsers.

    In addition i simply adjusted the actual header to the right height for my specific example

    #header {
    width: 100%;
    height: 480px;
    }

    but that is already past the issue of finally having this different backgrounds for different wordpress pages cleared up, hope it’s useful for anyone looking to solve it on their blogs, shouldn’t be a luxury to have different looks on different pages or posts with WordPress!

  • The topic ‘the working simplicity on different background images for different pages’ is closed to new replies.