Using Backstretch for different images for individual pages

亡梦爱人 提交于 2020-01-02 08:39:11

问题


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?


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




回答2:


  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.



来源:https://stackoverflow.com/questions/25012717/using-backstretch-for-different-images-for-individual-pages

易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!