我正在尝试添加一个背景图像在我的小网站项目，但它根本不显示。

我在网上看了很多例子，没有一个解决方案对我有效，尽管这似乎是一个很常见的问题。

我的HTML代码和CSS的区域，我想放置背景图像:

null

/* logo */
#logo-area {
    display: flex;
    height: 170px;
    align-items:flex-end;
    justify-content: center;
    margin: 10px 50px;
    background-image: url(vendors/img/background.jpg);
    background-size: contain;
}
#logo-area img {
    margin: 10px 50px;
}

#logo-area img:nth-child(1) {
    height: 100%;
}

#logo-area img:nth-child(2) {
    height: 40%;
}

#logo-area img:nth-child(3) {
    height: 40%;
}

<!--top navigation-->

<div id="logo-area">
    <img src="resources/img/Logo.png" alt="logo">
    <img src="vendors/img/ABTA70ColourRGB.png" alt="ABTA">
    <img src="vendors/img/iso-9001-certified-logo-AC594FAD01-seeklogo.com.png" alt="ISO9001">
</div>
    <nav id="myTopnav">
        <a href="index.html" class="active">Home</a>
        <a href="#news">News</a>
        <a href="#contact">Contact</a>
        <div class="dropdown">
          <button class="dropbtn"> Destinations
            <i class="fa fa-caret-down"></i>
          </button>
          <div class="dropdown-content">
            <a href="#">Spain</a>
            <a href="#">Greece</a>
            <a href="#">Portugal</a>
            <a href="#">Caribbean</a>
            <a href="#">Far East</a>
          </div>
        </div>
        <div class="dropdown">
            <button class="dropbtn"> City breaks
              <i class="fa fa-caret-down"></i>
            </button>
            <div class="dropdown-content">
              <a href="#">Paris</a>
              <a href="#">Berlin</a>
              <a href="#">Krakow</a>
              <a href="#">Amsterdam</a>
            </div>
          </div>
        <a href="#about">About</a>
        
        <a href="javascript:void(0);" class="icon" onclick="dropDown()">&#9776;</a>
    </nav>
<!--end of top navigation-->

null

任何帮助都将不胜感激。