3

我希望那里有人可以提供帮助。我正在尝试使用 jQuery Backstretch 为 Bootstrap/Wordpress 中的每个特定页面应用不同的背景图像。例如：

首页 - bg image a 关于 - bg image b 新闻 - bg image 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 中使用了它。

有没有人有办法解决吗？

4

2 回答 2

2

你可以试试：

<?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）。

于 2014-07-29T10:08:13.660 回答
1

  1. 我认为没有必要使用 backstretch：只需将此 css 样式内联添加到您的主体或主容器中：

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

    background-size: cover;

  2. 您应该考虑使用自定义字段来提供图像的路径。我认为最简单的方法是安装高级自定义字段并添加一个名为bg_image每个站点的字段，其中包含图像 url。然后你可以替换PATHTOYOURIMAGE为

    <?php the_field('bg_image'); ?>

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

于 2014-07-29T10:52:13.363 回答