How can I add a backgorund image that fits my content?-CodePudding

I am developing my friend's windsurf club website. The problem I have right now is, I am trying to give it a lavish look, and behind the <h1> and <h2> elements, I want my background image to lie. Right now, I have put the image and set the repeat to no-repeat but it is far apart from my content. Is it something about bootstrap? How can I correct it? The thing that I am trying to achieve is similar to these examples: image 1 image2 But right now it looks likes this: mywebsite

body {
  background-color: #B1B2FF;
  font-family: 'Poppins', sans-serif;
}

.navbar-brand,
.nav-link {
  color: #EEF1FF;
}

.addbg {
  background-image: url("images/24.jpg");
  background-size: contain;
  background-repeat: no-repeat;
  height: 400px;
  border-radius: 1%;
}

#top h2 {
  font-family: 'Noto Serif Gujarati', serif;
  letter-spacing: 0.8px;
  color: #EEF1FF;
}


/* font-family: 'Noto Serif Gujarati', serif;
font-family: 'Poppins', sans-serif; */

<!-- Bootstrap -->
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-Zenh87qX5JnK2Jl0vWa8Ck2rdkQ2Bzep5IDxbcnCeuOxjzrPF/et3URy9Bv1WTRi" crossorigin="anonymous">
<!-- Google Fonts -->
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Noto Serif Gujarati:wght@200;300;400&family=Poppins:wght@300;400;500;600;700&display=swap" rel="stylesheet">
<!-- Font Awesome -->
<script src="https://kit.fontawesome.com/1e90402f09.js" crossorigin="anonymous"></script>
<!-- Navbar -->
<nav >
  <div >
    <a  href="#">Bojark Windsurf</a>
    <button  type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
                <span ></span>
            </button>
    <div  id="navbarNav">
      <ul >
        <li >
          <a  aria-current="page" href="#">Ana Sayfa</a>
        </li>
        <li >
          <a  href="#">Paketlerimiz</a>
        </li>
        <li >
          <a  href="#">Hakkımızda</a>
        </li>
      </ul>
    </div>
  </div>
</nav>
<!-- Top Part -->
<section id="top">
  <div >
    <div >
      <div >
        <h1>Bojark Windsurf</h1>
        <h2>Bambaşka Bir Deneyime Hazır Mısın?</h2>
      </div>
    </div>
  </div>
</section>
<!-- Bootstrap JS-->
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-OERcA2EqjJCMA /3y gxIOqMEjwtxJY7qPCqsdltbNJuaOe923 mo//f6V8Qbsw3" crossorigin="anonymous"></script>

CodePudding user response：

i think you can use inner html, I think that's what I can help

       <div  style="
  background-image: url('https://mdbcdn.b-cdn.net/img/new/slides/041.webp');height: 400px;">

CodePudding user response：

Backgrounds lie completely in the CSS file, not the HTML file. They are inherintly behind all HTML elements. To create a background as it looks like you have done partly? I would remove the .addbg and add this line of code into the body info

background: url("images/24.jpg");