背景图像不适用于css id，但适用于css body答案

【问题标题】：Background-image not working for css id but for css body背景图像不适用于css id，但适用于css body
【发布时间】：2013-05-18 08:35:55
【问题描述】：

在 .CSS 文件中：

当我申请时

body {
font-size: .85em;
font-family: "Segoe UI", Verdana, Helvetica, Sans-Serif;
color: #232323;
background-color: #fff;
background: url('Images/Login_Background.jpg');
background-repeat: no-repeat;
background-attachment: fixed;
background-color: #FFFFFF;
background-position: center center;
background-size: 100% 100%;}

background-image:url('Images/Login_Background.jpg'); 工作正常

但只要我创建一个像这样的 id：

#login {
background: url('Images/Login_Background.jpg');
background-repeat: no-repeat;
background-attachment: fixed;
background-color: #FFFFFF;
background-position: center center;
background-size: 100px 100px;}

当我的<section id="login"> 使用这个css id 时； background: url('Images/Login_Background.jpg'); 样式不起作用！！！

我是不是在我无法发现的地方出错了？累死了！！！

【问题讨论】：

发布您的 HTML，您是否在元素上调用该 id？
请提供minimal reproducible example，以便我们查看拼图中的所有部分。

标签： html css background-image relative-path

【解决方案1】：

不确定您期望的结果是什么，但在 div 中看不到背景

由于background-repeat: no-repeat; 属性，这里有一个没有它的演示：http://jsfiddle.net/dBRQw/
元素的高度，请记住，空 div 的高度为 0px（除非您为其指定值或其中包含内容），在这种情况下您将无法看到背景，比如这里：http://jsfiddle.net/dBRQw/1/

这可能会给您带来问题，因为您还使用了background-position: center center; 属性，这会将您的 100 像素大小的背景发送到该元素的中心

http://jsfiddle.net/dBRQw/2/

我已将 div 的宽度和高度设置为 900 像素，以便您可以看到中心的背景。总而言之，您的问题可能是因为您的元素没有高度或没有内容，这使得他默认为 0px 高度。

希望对你有所帮助。

【讨论】：

【解决方案2】：

替换

#login {
background: url('Images/Login_Background.jpg');
background-repeat: no-repeat;
background-attachment: fixed;
background-color: #FFFFFF;
background-position: center center;
background-size: 100px 100px;}

与

#login {
background-image:url(Images/Login_Background.jpg);
background-repeat: no-repeat;
background-attachment: fixed;
background-color: #FFFFFF;
background-position: center center;
background-size: 100px 100px;
}

它应该可以正常工作...!!

【讨论】：