3

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?

Zanon
  • 29,231
  • 20
  • 113
  • 126
Dezza
  • 41
  • 2

2 Answers2

2

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

Howli
  • 12,291
  • 19
  • 47
  • 72
  • Thanks Howlin. Where would your suggested code sit within my previous example? What parts to I replace? Sorry for the 'paint by numbers' request :) Dezza. – Dezza Jul 29 '14 at 10:21
  • Try replacing your last "script" with the above. – Howli Jul 29 '14 at 10:23
  • Works :) Thankyou very much Howlin. You've just relieved two days of brain hurt! – Dezza Jul 29 '14 at 10:43
1

  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.

radscheit
  • 352
  • 4
  • 22
  • Thanks Radscheit. Ok, i'm having difficulty working out what you've suggested. I've placed the .css in my main style sheet (bootstrap.css), does sit inside the brackets or replace the whole background: css line? Ive also installed ACF and created a bg_image field with a return value - image url. I'm assuming this needs to be exported as .php and placed in each page? I dont get how I can reference a different image for each page. Do you have a working example I could view? Sorry, this is all very new to me. Dezza. – Dezza Jul 29 '14 at 11:36
  • Hej, in order to make it work you have to apply this style inside the tag and not in an external style sheet. Please note that ``is just a placeholder like `the_content()`. Once implemented it gets automatically the right image url of the image that you have defined in your backend. So you better log into your wordpress, take a random site and look up if there is a field below the editor for adding an image. Add one, save and finish :) – radscheit Jul 29 '14 at 12:51