Question

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

首页 - bg图片a 关于 - bg图片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中使用了这个。

有没有人有解决方案？

Answer 1

你可以尝试：

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

Answer 2

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

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

background-size: cover;
您应该考虑使用自定义字段来提供图像的路径。我认为最简单的方法是安装Advanced Custom Fields并向每个网站添加一个名为bg_image的字段，其中包含图片网址。然后，您可以将<{1}}替换为

PATHTOYOURIMAGE

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

使用Backstretch为各个页面的不同图像

2 个答案: