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: https://www.harrisonshairstudio.co.uk/

    Hopefully someone can help, thanks

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

  • using the conditional tag is_page('page name')
    https://codex.www.ads-software.com/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>
    Thread Starter George McKnight

    (@pixel8)

    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?

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

    Thread Starter George McKnight

    (@pixel8)

    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.