Css 与其他页面不同的主页背景图像_Css_Image_Background

Css 与其他页面不同的主页背景图像

css image

Css 与其他页面不同的主页背景图像,css,image,background,Css,Image,Background,我有一个网站，大约有7个不同的页面。我想有两个不同的背景图像，一个用于主页，另一个将显示在其他页面上。这需要Javascript/Jquery还是简单的css 如下所示，我将我的身体设置为在其他六个页面上显示背景图像。然后尝试在我的HTML索引页面中直接使用css并显示不同的背景，但失败了 body { font-family: Helvetica, Arial, sans-serif; background: url(images/hso-palmtree-background.jpg)

我有一个网站，大约有7个不同的页面。我想有两个不同的背景图像，一个用于主页，另一个将显示在其他页面上。这需要Javascript/Jquery还是简单的css

如下所示，我将我的身体设置为在其他六个页面上显示背景图像。然后尝试在我的HTML索引页面中直接使用css并显示不同的背景，但失败了

body {
font-family: Helvetica, Arial, sans-serif;  
background: url(images/hso-palmtree-background.jpg) no-repeat center center fixed; 
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}

有很多方法

让每个人都有一个id或类

或者将背景添加为html

background:imgurl

您可以为每个页面上的body标记指定特定的类

在家里说：

  <body class="home">

等等…

不，不需要JS…将类应用于主页的正文，然后相应地选择并设置样式。相关：非常好，谢谢！）

 <body class="page-1">
 <body class="page-2">
 ....

/* common body css */
body {
font-family: Helvetica, Arial, sans-serif;  
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
} 

/* specialized body for home */
body.home {
   background: url(images/hso-palmtree-background.jpg) no-repeat center center fixed; 
}

/* specialized body rules for page 1 */
body.page-1 {
   background: url(images/background-for-page-1.jpg) no-repeat center center fixed; 
}