Question

我正在尝试将我的背景图片显示在页面的顶部中心。如果我这样做，图像工作正常：

<style>
  body {
   background: #FFF url('img/top_logo_blank_small.png') no-repeat fixed;
  }
</style>

我似乎无法解决我出错的地方。必须有一些我设法搞砸了，我只是看不到它。这是CSS：

body {
font-family: 'Quattrocento Sans', helvetica, sans-serif;
background: #EEE url('img/top_logo_blank_small.png') no-repeat fixed;
color: #fff;
margin: 0;
padding: 0;
}

a {
color: black;
text-decoration: none;
}

/* Typography */

.header h1 {
position: absolute;
width:100%;
top: 50%;
margin-top: -20px;
text-align: center;
letter-spacing: 4px;
}

.header h1 em {
font-size: 1.200em;
font-style: normal;
}

h1 {
font-size: 2.2em;
color: #fff;
}

.content h2 {
font-size: 1.75em;
color: #fff;
letter-spacing: 4px;
text-align: center;
}

.content h2 em {
font-size: 1.2em;
font-style: normal;
}

.content h3 {
text-align: center;
font-size: 1.0em;
font-weight: normal;
color: #ede0ed;
letter-spacing: 1px;
margin-bottom: 25px;
}

.content h4 {
margin-top: 0;
text-align: center;
font-size: 0.8em;
font-weight: normal;
color: #ede0ed;
letter-spacing: 1px;
}

#banner p {
text-align: center;
}

/* Navigation */

#nav {
margin: 4px 4px 40px;
}

#nav ul {
padding: 0;
margin: auto;
list-style: none;
}

#nav ul li {
width: 50%;
color: #BBB;
float: left;
font-family: 'Cabin Sketch';
font-size: 1.75em;
text-align: center;
background: url(img/scribble_dark.png);
}

#nav ul li a {
display: block;
/*padding: 5px 20px;*/
}

#nav ul li a:hover {
background: #e0d0e0;
}

/* Content */

.container{
max-width: 720px;
margin: 50px auto 0;
background: #FFF url('img/top_logo_blank_small.png') no-repeat fixed 0 0;
}

.header {
position: relative;
background-color: #b88fb8;
border-top: 5px solid #ede0ed;
height: 75px;
}

.content {
background-color: #000;
padding: 15px;
margin-bottom: 10px;
}

div#about {
padding:25px;
min-height: 255px;
}

img#portrait {
float: left;
margin-right: 25px;
width: 256px;
height: 256px;
}

div#footer {
width: 100%;
max-width: 720px;
margin: auto;
color: black;
text-align: right;
padding: 0 10px;
font-size: 0.850em;
}

@media screen and (max-width: 650px) {

.container { 
    width: 90%;
    max-width: none;
}

div#footer {
    width: 90%;
}
}

Answer 1

您的css文件很可能位于不同的文件夹中，因此需要另一条指向图像文件的路径。

常见的方法是将css放在单独的css/*文件夹中，因此路径应为：

url('../img/top_logo_blank_small.png')

Answer 2

尝试更改路径，例如：

background: #EEE url('../img/top_logo_blank_small.png') no-repeat fixed top;

因为你在子文件夹中，所以你必须达到我认为的水平

Answer 3

这个CSS似乎工作正常，你确定图像存在吗？

http://jsfiddle.net/ghsNR/

我刚刚在这里试过，它可以使用来自http://placehold.it/

的图片

body {
font-family: 'Quattrocento Sans', helvetica, sans-serif;
background: #EEE url('http://placehold.it/500x500') no-repeat fixed top;
color: white;
margin: 0px;
padding: 0px;
}

观察到此后最可能的原因是您的CSS实际上并未正确定位图像。我建议使用Chrome开发工具或Firebug等工具来检查浏览器尝试用来加载图像并从那里向前移动的绝对路径。

Answer 4

css与页面位于同一文件夹中吗？如果您有其他文件夹，则需要相应地更改URL。

可能会将网址更改为

'../img/top_logo_blank_small.png'

CSS没有背景图片，有什么想法吗？

4 个答案: