如何使用CSS3将我的背景图像显示在标题后面的文本中？

Question

我尝试检查一切，以确保图像被正确引用，以便它可以显示在我的横幅中，但似乎没有任何效果。

这是我的HTML：

 <header id="header">
     <h1> Most Loved Place on Earth</h1>
  </header>

我的CSS3：

  header {font-family: journalregular;
  font-size: 250%;
  text-align: center;
   color:#B22222;
   **background-image: url("images/cover.jpg");}**    

图像位于右侧文件夹中，我正在使用正确的扩展名。我也尝试了没有引号的URL。救命啊！

Answer 1

首先，图像路径必须与您的css路径有关，在您的代码示例中，图像位于图像文件夹中，并共享相同的css文件根。

如果您的css是locadte，例如：

rootfolder/css/nameofcssfile.css

您的图片位于：

rootfoder/images/backgroundfile.jpg

所以引用必须是：

background-image: url(../images/cover.jpg);

带或不带引号的图片路径，我更喜欢没有引号