背景图片无法显示

Question

我在我的HTML中有这个东西，除了背景图片：'images/Header.jpg'之外，一切都可以工作； 相反，我看到头部是灰色的，但没有图片，我尝试移除灰色颜色，但仍然看不到图片...

#outerWrapper #header {
border-bottom: solid 1px #628152; 
font-size: 18px;
font-weight: bold;
line-height: 15px;
height: 115px;
background-color: Grey;
background-image: url('images/Header.jpg');

我该如何让这个生效.. 请帮忙.. 谢谢

- user175084

Answer 1

CSS文件的路径和图片的路径是什么？

请注意，在CSS中使用url()时，路径是相对于CSS文件而不是请求的页面。

假设您有以下文件：

/website/index.html
/website/templates/main.css
/website/images/header.jpg

如果CSS必须这样写：

.style{background-image:url(../images/header.jpg);} /* Noticed "../"? */

- Arseni Mourzenko

Answer 2

尝试将网址更改为'/images/Header.jpg'。

- Mark Avenius

---

可能主机没有为静态内容进行配置。 - Alex Nguyen

@AlexNguyen：我不是想移动文件，而是引用它。将这个改成：url('/images/Header.jpg');，而不是 url('images/Header.jpg');。 - Mark Avenius

那对我有用，谢谢@Mark！哈，相对路径只需要在前面加上“/”就可以了。 - Ian Campbell

Answer 3

使用Firefox的Firebug查看您的页面。可能是由于未正确加载图像导致的问题。如果这是您的问题，您也可以实时调整CSS。

- Lareau

Answer 4

你确定需要 ' 字符吗？也许它是区分大小写的，而且你在 URL 中犯了一个错误。也许应该是 background-image:url(images/header.jpg);。

- bAN