移动网站的每个页面上的不同背景图片？

【问题标题】：different background image on each page of mobile site?移动网站的每个页面上的不同背景图片？
【发布时间】：2012-09-06 23:45:59
【问题描述】：

目前，我正在使用这段代码来调用静止图像背景，而不是在常规站点上播放的视频：

media only screen and (min-device-width : 320px) and (max-device-width : 480px) {
         html{
           background: url('img/background.jpg') no-repeat center center fixed !important;
           background-size: cover;
           height: 100%;
         }
}

我想为每个页面使用不同的图像，我该如何实现？

谢谢。

【问题讨论】：

标签： css image mobile background-image

【解决方案1】：

如果您为每个页面的正文标记提供不同的 ID，则可以使用不同的图像定位每个页面：

HTML：

<body id="homepage">

<body id="about">

等等……

然后，在您的媒体查询中，CSS 将是：

body#homepage {
    background-image: url('img/homepageBackground.jpg');
}

body#about {
    background-image: url('img/aboutBackground.jpg');
}

【讨论】：

这是一个 Wordpress 网站这一事实是否会改变这一点？ <body> 标签位于页眉中，在所有页面中通用。
我不明白为什么这会限制你...我发现这篇文章 wordpress.org/support/topic/change-background-by-page-id 使用 Wordpress 的 body_class() 方法为 body 标记提供标识符