无法获取任何图像作为CSS中的背景图像

Question

我正试图在CSS文件中从本地文件添加一个背景图像。我已经试过了/img/img1.jpeg到img1.jpeg等等。我甚至尝试添加教程正在使用的网站URL，但它仍然不起作用。这就是我目前正在处理的问题。

这是CSS和HTML:

.intro {
height: 100%;
width: 100%;
margin: auto;
background: url("../img/Stone Wall Witch Hut Watermarked.jpeg") no-repeat 50% 50%;

<secion class="intro">
<nav>
<a href="#" id="menu-icon"></a>
<ul>
<li><a href="#about">About Me</a></li>
<li><a href="#port">Portfolio</a></li>
<li><a href="#serv">Services</a></li>
<li><a href="#contact">Contact Me</a></li>
</ul>
</nav>
<div ckass="inner">
<div class="content">
<h1>Photography</h1>
<p>my pictures</p>
</div>
</div>
</section>

我在教程中使用的URL是：https://static.pexels.com/photos/248159/pexels-photo-248159.jpeg

我想使用的图像在一个名为img的文件夹中。父文件夹称为Photography Starter Files。img文件夹、HTML和CSS都在其中。无论我在后台放了什么，我都无法得到任何东西。

Answer 1

正如blurfus在评论中所提到的，您的HTML中有一个错误。打开的<section>标记被拼错为<secion>。您的代码片段中也没有CSS的结束}。

有关工作版本，请参阅下面的代码段。你很亲密！请注意，我使用了你照片的直接网络链接，所以它可以在片段中工作。

.intro {
height: 100%;
width: 100%;
margin: auto;
background: url("https://static.pexels.com/photos/248159/pexels-photo-248159.jpeg") no-repeat 50% 50%;
}

<section class="intro">
<nav>
<a href="#" id="menu-icon"></a>
<ul>
<li><a href="#about">About Me</a></li>
<li><a href="#port">Portfolio</a></li>
<li><a href="#serv">Services</a></li>
<li><a href="#contact">Contact Me</a></li>
</ul>
</nav>
<div ckass="inner">
<div class="content">
<h1>Photography</h1>
<p>my pictures</p>
</div>
</div>
</section>

Answer 2

我可以发现两个可能导致这种情况的错误。

1. css文件中的.intro标记缺少右大括号
2. html文件中的section标记拼写错误

否则，它似乎运行良好。重新创建您的示例