我正在做一個小的投資組合項目，想在我創建的家居部分使用背景圖片。雖然一切(代碼)看起來都沒問題，但背景屬性background:URL()；和背景-圖像:()；不起作用。我一遍又一遍地檢查代碼，但我找不到問題。

我試圖使用網絡托管的圖像，認為這是本地圖像的問題，但也不起作用。然而，當我試圖在一個舊項目上實現相同的過程以確認我沒有犯錯誤時，它像預期的那樣工作。

需要幫助了解什么是錯的。

@import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,400;0,500;0,600;0,700;0,800;0,900;1,300&display=swap');
:root {
  --main-color: #0B192E;
  --main-lite-color: #233554;
  --font-color: #BEC8E9;
  --font-dark-color: #8892b0;
  --font-lite-color: #ccd6f6;
  --box-color: #112240;
  --style-color: #52D2B9;
  --main-font: 'Poppins';
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  text-decoration: none;
  border: none;
  outline: none;
  scroll-behavior: smooth;
  font-family: var(--main-font), sans-serif;
}

html {
  font-size: 62.5%;
  overflow-x: hidden;
}

body {
  background: var(--main-color);
  color: var(--font-color);
}


/* header styling */

.header {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  padding: 2rem 9%;
  background: transparent;
  display: flex;
  justify-content: space-between;
  align-items: center;
  z-index: 100;
}

.logo {
  font-size: 2.5rem;
  color: var(--font-color);
  font-weight: 600;
}

.navbar a {
  font-size: 1.7rem;
  color: var(--font-color);
  font-weight: 500;
  padding-left: 3.5rem;
  transition: .3s;
}

.navbar a:hover,
.navbar a.active {
  color: var(--style-color);
}

#menu-icon {
  font-size: 3.6rem;
  color: var(--font-color);
  cursor: pointer;
  display: none;
}


/* header styling end */


/* Intro/home section styling */

section {
  min-height: 100vh;
  padding: 10rem 9% 2rem;
}

.home {
  display: flex;
  align-items: center;
  padding: 0 9%;
  background: url("https://cdn.pixabay.com/photo/2023/05/08/13/24/laptop-7978588_960_720.jpg") no-repeat;
  background-size: cover;
  background-position: center;
}

.home-content {
  max-width: 60rem;
}

.home-content h1 {
  font-size: 2rem;
  font-weight: 600;
}

.home-content h1 span {
  color: var(--style-color);
}

.home-content h2 {
  font-size: 5.6rem;
  font-weight: 800;
}

.home-content .text-animation {
  position: relative;
  width: 35rem;
}

.home-content .text-animation h3 {
  font-size: 3.2rem;
  font-weight: 700;
  color: transparent;
  -webkit-text-stroke: 1.5px var(--style-color);
}

.home-content p {
  font-size: 1.5rem;
  margin: 2rem 0 4rem;
}

.contact-btn {
  position: relative;
  display: flex;
  justify-content: space-between;
  width: 35rem;
  height: 5rem;
}

.contact-btn .btn {
  position: relative;
  display: inline-flex;
  justify-content: center;
  align-items: center;
  width: 15rem;
  height: 100%;
  background-color: var(--style-color);
  border: .2rem solid var(--style-color);
  border-radius: .8rem;
  font-size: 1.5rem;
  font-weight: 600;
  letter-spacing: .1rem;
  color: var(--main-color);
  z-index: 1;
  overflow: hidden;
  transition: .5s;
}

.contact-btn .btn:hover {
  color: var(--style-color);
}

.contact-btn .btn:nth-child(2) {
  background: transparent;
  color: var(--style-color);
}

.contact-btn .btn:nth-child(2):hover {
  color: var(--main-color);
}

.contact-btn .btn:nth-child(2)::before {
  background: var(--style-color);
}

.contact-btn .btn::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 0;
  height: 100%;
  background: var(--main-color);
  z-index: -1;
  transition: .5s;
}

.contact-btn .btn:hover::before {
  width: 100%;
}

.social-icons {
  position: absolute;
  bottom: 4rem;
  width: 170px;
  display: flex;
  justify-content: space-between;
}


/* .social-icons::before {
    content: '';
    position: absolute;
    width: .1rem;
    height: 100%;
    background: var(--style-color);
    transform: rotate(90deg);   
    top: -.45rem;
    margin-right: 1rem;
} */

.social-icons a {
  margin-bottom: 1rem;
  position: relative;
  display: inline-flex;
  justify-content: center;
  align-items: center;
  font-size: 1.5rem;
  width: 40px;
  height: 40px;
  border: .2rem solid var(--style-color);
  border-radius: 50%;
  color: var(--style-color);
  z-index: 1;
  overflow: hidden;
}

.social-icons a:hover {
  color: var(--main-color);
}

.social-icons a::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  background: var(--style-color);
  width: 0;
  height: 100%;
  z-index: -1;
  transition: .5s;
}

.social-icons a:hover::before {
  width: 100%;
}


/* Intro/home section styling end */

<!-- header design -->
<header class="header">
  <a href="#" class="logo">Adewale.</a>

  <div class="fa-solid fa-bars" id="menu-icon"></div>

  <nav class="navbar">
    <a href="#home" class="active">Home</a>
    <a href="#about">About</a>
    <a href="#education">Education</a>
    <a href="#skills">Skills</a>
    <a href="#contact">Contact</a>
  </nav>
</header>
<!-- header design end -->

<!-- home section design -->

<section class="home" id="home">
  <div class="home-content">
    <h1>Hi, <span>my name is</span></h1>
    <h2>Adewale Mudasiru</h2>
    <div class="text-animation">
      <h3>Front-end Developer</h3>
    </div>
    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Accusantium esse quos sapiente pariatur, maiores nisi itaque praesentium. Neque, assumenda fugit praesentium, accusamus asperiores explicabo esse expedita ad aliquam, aspernatur reiciendis!</p>

    <div class="contact-btn">
      <a href="#" class="btn">Let's Talk</a>
      <a href="#" class="btn">Download CV</a>
    </div>

    <div class="social-icons">
      <a ><i class="fa-brands fa-facebook-f"></i></a>
      <a ><i class="fa-brands fa-twitter"></i></a>
      <a ><i class="fa-brands fa-linkedin-in"></i></a>
    </div>
  </div>
</section>

<!-- home section design end -->


<script src="assets/main.js" async defer></script>