我有以下HTML:
<html>
<head>
<title>
Think in a NEW BOX.
</title>
<link rel="stylesheet" type="text/css" href="styles/default.css" />
</head>
<body onload="">
<div id="content">
<div id="header">
<img src="images/title-1.png" /><img src="images/title-2a.png" /><img src="images/title-3.png" /></div><div id="fcontent">
hi
hi
</div>
</div>
</body>
</html>
...以及以下CSS:
div#fcontent{
background-image:url('images/forground.png');
width:100%;
padding:0px;
margin-top:0px;
background-repeat:repeat-y;
}
我的背景没有出现,为什么会这样?
以下是所有CSS,以防万一(问题可能在上面的CSS片段中):
html, body {
background-color:black;
font-family:"arial bold";
overflow:auto;
text-align: center;
display: inline-block;
color:white;
}
div#content {
width:792px;
height:100%;
padding:0px;
}
div#header {
height:216px;
width:100%;
padding:0px;
margin-bottom:0px;
}
div#fcontent{
background-image:url('images/forground.png');
width:100%;
padding:0px;
margin-top:0px;
background-repeat:repeat-y;
}
* {
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-o-user-select: none;
user-select: none;
}
答案 0 :(得分:10)
请记住,图像的路径是相对于CSS文件的,因此如果您的CSS文件位于“样式”文件夹等中,则当前请求的图像必须位于/styles/images/forground.png.
如果您将网址的位置更改为绝对网址(例如从根网址),则可以避免此类问题。
url('/images/forground.png');
或者你可能想要跳出当前文件夹然后进入images文件夹:
url('../images/forground.png');
希望有所帮助。
答案 1 :(得分:1)
我没有看到ID为fcontent
的DIV可能是第一个问题。
答案 2 :(得分:1)
我只是粘贴了你的代码,它适用于chrome和firefox。
确保您的图片路径正确无误,并且您可能需要尝试设置高度。
答案 3 :(得分:0)
注意,这是根路径:
url('/images/forground.png');
始终参考:www.yoursite.com/images/forground.png
虽然这是相对路径,您通常应该使用它:
url('images/forground.png');
url('../images/forground.png');
有关详细信息,您可以查看以下主题:Background not working for a div as it should