Support » Fixing WordPress » Different Background Image on Certain Pages

  • I have a web site that has a background image that resizes to the browser width/height using some jquery, and I would like to change that image on certain pages.
    The script targets a div with an id of body-background, so I was wondering if it was possible to target that div and change it’s contents to be another image when I’m on a different page (one for the About, one for the Contact, another maybe for the Blog)?

    This is the div in question with it’s content:
    <div id=”body-background”><img src=”images/bg-harrisons-01-2.jpg” alt=”Home page background” /></div>
    It uses the script jquery.ez-bg-resize.js

    The site can be viewed at: http://www.harrisonshairstudio.co.uk/

    Hopefully someone can help, thanks

Viewing 4 replies - 1 through 4 (of 4 total)
  • Michael

    (@alchymyth)

    Forum Moderator

    using the conditional tag is_page('page name')
    http://codex.wordpress.org/Function_Reference/is_page

    for instance:

    <?php
    if( is_page('About') ) { $img = 'about-bg-img.jpg'; }
    elseif( is_page('Contact') ) { $img = 'contact-bg-img.jpg'; }
    elseif( is_page('Blog') ) { $img = 'blog-bg-img.jpg'; }
    else { $img = 'bg-harrison-01-2.jpg'; }
    ?>
    <div id="body-background"><img src="images/<?php echo $img; ?>" alt="Home page background" /></div>

    Excellent, looks pretty straight forward, so I’ll give it a go tonight when I get home from work.
    I take it I just add it to the functions.php file?

    Michael

    (@alchymyth)

    Forum Moderator

    you put it where your posted code is now –
    basically replace what you have with the new.

    Just gave it a go, and it works beautifully!

    Thanks again for helping out alchymyth, your a star.

    I just need to find a way to stop each page ‘flickering’ onload, but I think that’s a jquery issue – one for another post 🙂

Viewing 4 replies - 1 through 4 (of 4 total)
  • The topic ‘Different Background Image on Certain Pages’ is closed to new replies.