[resolved] Different Background Image on Certain Pages (5 posts)

  1. George McKnight
    Posted 5 years ago #

    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

  2. Michael
    Forum Moderator
    Posted 5 years ago #

    using the conditional tag is_page('page name')

    for instance:

    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>
  3. George McKnight
    Posted 5 years ago #

    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?

  4. Michael
    Forum Moderator
    Posted 5 years ago #

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

  5. George McKnight
    Posted 5 years ago #

    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 :-)

Topic Closed

This topic has been closed to new replies.

About this Topic