问题
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:
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;
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 replacePATHTOYOURIMAGE
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