使用反向拉伸时，背景图片未显示在wordpress的“新闻页面”上

Question

I have used backstretch to switch bg image for each page on my wordpress site, all is fine except for my 'news page' (ie blog functionality). Even though I've identified and used the correct page ID, the script doesn't want to update it.

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

<?php
    if(is_page(2))
    {
        echo '<script>$.backstretch("http://www.myurl.co.uk/wp-content/themes/name/img/bg_homepage.jpg");</script>';
    } 
    else if(is_page(51))
    {
        echo '<script>$.backstretch("http://www.myurl.co.uk/wp-content/themes/name/img/bg_food_menu.jpg");</script>';
    }
    else if(is_page(60))
    {
    echo '<script>$.backstretch("http://www.myurl.co.uk/wp-content/themes/name/img/bg_whats_on.jpg");</script>';
    }
    else if(is_page(53))
    {
    echo '<script>$.backstretch("http://www.myurl.co.uk/wp-content/themes/name/img/bg_drink_menu.jpg");</script>';
    }
    else if(is_page(57))
    {
    echo '<script>$.backstretch("http://www.myurl.co.uk/wp-content/themes/name/img/bg_where_when.jpg");</script>';
    }
    else if(is_page(55))
    {
    echo '<script>$.backstretch("http://www.myurl.co.uk/wp-content/themes/name/img/bg_whats_on.jpg");</script>';
    }
?>

From this code, page 60 is displayed without a background image. Do I need to write something specific for news/blog pages?

Any suggestions will be gratefully received.

Answer 1

You'll probably need to nest the whole thing inside a document.ready call, otherwise you're trying to initialise it before anything is ready.

Try this:

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

<script>
$(document).ready(function(){
<?php
    if(is_page(2))
    {
        echo '$.backstretch("http://www.myurl.co.uk/wp-content/themes/name/img/bg_homepage.jpg");';
    } 
    else if(is_page(51))
    {
        echo '$.backstretch("http://www.myurl.co.uk/wp-content/themes/name/img/bg_food_menu.jpg");';
    }
    else if(is_page(60))
    {
    echo '$.backstretch("http://www.myurl.co.uk/wp-content/themes/name/img/bg_whats_on.jpg");';
    }
    else if(is_page(53))
    {
    echo '$.backstretch("http://www.myurl.co.uk/wp-content/themes/name/img/bg_drink_menu.jpg");';
    }
    else if(is_page(57))
    {
    echo '$.backstretch("http://www.myurl.co.uk/wp-content/themes/name/img/bg_where_when.jpg");';
    }
    else if(is_page(55))
    {
    echo '$.backstretch("http://www.myurl.co.uk/wp-content/themes/name/img/bg_whats_on.jpg");';
    }
?>
});

Also check for any JS errors in your console that might be preventing it from running properly.