Using Backstretch for different images for individual pages

3 Views

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…

Read More

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?

Post Views: 3

Related posts

Leave a Reply

2 comments

  1. 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).

    1. I think there is no need for using backstretch: Just add this css styles inline to your body or main container:

      background: url(PATHTOYOURIMAGE) center center no-repeat;

      background-size: cover;

    2. You should consider using a custom field for giving the path to your image. I think the easiest way is to install Advanced Custom Fields and to add a field called bg_image to every site with the image url in it. Then you can replace PATHTOYOURIMAGE with

      <?php the_field('bg_image'); ?>

    It is another way but I think you should give it a try.