html - 在 CSS 中添加背景图片

Question

我正在尝试向单页产品网站上的第一个面板添加背景图片。出于某种原因(我无法弄清楚)我的背景图片无法加载。请帮忙!

HTML:

<!-- panel 1 -->
<div class="header">
<h3> Introducing the </h3>
<h1> Vespa Tribute </h1>
<p> Scheduled for release in June 2016, this limited edition scooter will only      be produced 250 times. Enter your email below to be partnered with a Vespa representative who will ensure that you stay updated and informed about how be part of this exclusive venture. </p>
<input type="text" name="emailaddress" placeholder="Email address">
<button type="button">Get exclusive Info</button>
<img src="images/vespa1.png" alt="vespa" />

CSS:

/* 标题面板 */

.header {
background-image: url('images/image1.png');
background-size: cover;
background-repeat: no-repeat;
}

Answer 1

你的 div 没有关闭，但我假设你没有粘贴整个代码。

您的 CSS 代码显示 HEADER PANEL - 这是否意味着您没有将其用作单独的样式表？如果它在单独的工作表中，您必须指定与样式表位置相关的路径，而不是 HTML 的位置。

您是在自己的机器上工作还是在实时服务器上测试此代码？您正在使用 CMS 或其他带有自己的 CSS 库的附加组件吗？

我建议按照 Nathan 的建议，通过从地址栏加载它来确保它是正确的文件路径。

接下来，如果您要实时测试此代码，我将尝试指定确切的文件路径 - “http://server.com/images/image1.png”

在那之后，如果它仍然无法正常工作并且文件路径正确，请尝试打开所有链接的样式表并找到与“img”元素关联的任何值 - 一个一个地删除它们，同时刷新页面以找到冲突的代码。

否则我觉得还不错，所以如果这些建议中的任何一个都没有解决我会感到惊讶。