Css 横幅未显示

Question

我这里有一些 CSS，但我放置的横幅没有显示。有帮助吗？

css:

.home {
display: flex;
background: url('./images/banner.jpg') no-repeat center;
height: 100vh;
}

html:

<section class="home" id="home">
  <div class="max-width">
    <div class="home-content">
      <div class="text-1">Hello, my name is</div>
      <div class="text-2">Sefatul Bahar</div>
      <div class="text-3">And I'm an <span>accountant</span></div>
    </div>
  </div>
</section>

Answer 1

这对于 HTML 可能更有意义。你没有提供你的 HTML，所以我不确定你要做什么，但这已经是我能用一点点 CSS.

得到的最好的了

/*I used a different image just to see if this would work*/

.home {
    display: flex;
    background: url(https://wallpaperaccess.com/full/187161.jpg);
    /*you were missing the -repeat and -position*/
    background-repeat: no-repeat;
    background-position: center;
    height: 100vh;
}

<!DOCTYPE html>
<html lang="en">

<head>

    <title>Help</title>

</head>

<body>
    <main class="home">
        <div>
            <h1> Hello </h1>
        </div>
    </main>

</body>

</html>

/*I used a different image just to see if this would work*/

.home {
    display: flex;
    background: url(https://wallpaperaccess.com/full/187161.jpg);
  /*you were missing the -repeat and -position*/
    background-repeat: no-repeat;
    background-position: center;
    height: 100vh;
}

Css 横幅未显示

Css banner not showing up

html

css

image

banner