对各个页面的不同图像使用Backstretch - Using Backstretch for different images for individual pages

Using Backstretch for different images for individual pages

本文关键字：图像 Backstretch | 更新日期: 2023-09-27

希望有人能帮上忙。我试图使用jQuery Backstretch为Bootstrap/Wordpress内的每个特定页面应用不同的背景图像。例句:

Home - bg image大概是- bg图像b新闻-图片c等等…

我已经设法使用标准的Backstretch脚本来显示所有页面的单个图像，但我完全迷失了(即使在搜索之后)如何应用上述内容。

我的代码:

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

我在我的footer.php中使用了这个

有人有解决办法吗?

你可以试试:

<?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>';
}
?>

数字42,41是页面的id。Sp text_bg_b.jpeg将只显示在About us页面上(假设它的id是41)。

我认为没有必要使用backstretch:只需添加这个css样式内联到你的主体或主容器:

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

background-size: cover;
您应该考虑使用自定义字段来提供图像的路径。我认为最简单的方法是安装高级自定义字段，并添加一个名为bg_image的字段到每个站点，其中包含图像url。然后可以用
替换PATHTOYOURIMAGE
<?php the_field('bg_image'); ?>

这是另一种方法，但我认为你应该试一试。