为什么背景图片无法加载?

时间:2019-10-30 11:31:29

标签: css background-image gatsby gatsby-image

image1

我的背景图片无法加载!谁能告诉我发生了什么事?是因为盖茨比吗?我应该改用gatsby-image吗?

    background-image: url('/src/components/images/header.png');
    background-size: cover;
    background-position: center;
    width: 100%;
  }

<div id="page">
     <div className='header'>
        <h1>Header</h1>
      </div>
      <div>
        <h1>About</h1>
      </div>
      <div>
        <h1>Projects</h1>
      </div>  
     </div>

1 个答案:

答案 0 :(得分:0)

我们实际上没有您的代码,所以我们不知道您正在使用哪个代码。但是我们确实知道哪些代码有效,并且如下所示:

.header {
  background-image: url("https://i.stack.imgur.com/YLMDq.jpg?s=48&g=1");
  background-size: cover;
  background-position: center;
  width: 100%;
}
<div class="header">
  <h1>Header</h1>
</div>

主要区别可能是在CSS中,我使用双引号。