phpwordpressimagetwitter-bootstrapjquery-backstretch

Using Backstretch for different images for individual pages

I hope there's someone out there that can help. I am trying to use jQuery Backstretch to apply a different background image for each specific page within Bootstrap/Wordpress. e.g:

Home - bg image a About - bg image b News - bg image c and so on...

I've managed to use the standard Backstretch script to display a single image for all pages, but I am totally lost (even after searching) on how to apply the the above.

My code so far:

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script src="http://myurl.co.uk/wp-content/themes/wpbootstra/bootstrap/js/jquery.backstretch.min.js"></script>

<script>
    $.backstretch("http://myurl.co.uk/wp-content/themes/wpbootstrap/bootstrap/img/test_bg.jpeg");
</script>

I have used this in my footer.php.

Does anyone have a solution?

Solution

  • You could try:

    <?php
if(is_page(42))
{
    echo '<script>$.backstretch("http://myurl.co.uk/wp-content/themes/wpbootstrap/bootstrap/img/test_bg.jpeg");</script>';
} 
else if(is_page(41))
{
    echo '<script>$.backstretch("http://myurl.co.uk/wp-content/themes/wpbootstrap/bootstrap/img/test_bg_b.jpeg");</script>';
}
?>

    The number 42, 41 being the id of the page. Sp text_bg_b.jpeg will only display on the About us page (assuming its id is 41).