Background image not showing in CSS/ HTML

Question

I am trying to add a background image in my little website project, but it doesn't display at all.

I have gone through numerous examples on the web and no of the solutions that I have found have worked for me, though it seems to be a very common issue.

My HTML codes and CSS for the area I want to place background image:

/* 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-->

Any help will be much appreciated.

check if the path is correct, and check in your browser console if your image is loaded — Sfili_81, Jun 30 '20 at 14:13
Where is your CSS file located relative to your "vendors" folder? As all of the answers will tell you, the image path should be relative to the location of the CSS file, not relative to the HTML file. This is different from the path for `img` tags. — Heretic Monkey, Jun 30 '20 at 14:31
Does this answer your question? [CSS Background Image Not Displaying](https://stackoverflow.com/questions/14029277/css-background-image-not-displaying) — Heretic Monkey, Jun 30 '20 at 14:33

score 1 · Answer 1 · answered Jun 30 '20 at 14:19

1

This issue generally arises when there is something wrong with the path of the image you are using as the background image. So, checking that first might work.

answered Jun 30 '20 at 14:19

Eesha Srivastava

9
2

Macky · Answer 2 · 2020-06-30T15:11:52.157

In your case i would create a div with id e.g "logo-area__content" inside the div with id "logo-area" and put all the img inside of "logo-area__content". you can assign than the following css to "logo-area-content" display: flex; align-items:flex-end; justify-content: center; margin: 10px 50px;

assign the following css to "logo-area" : background-image: url(your url here); background-position: center center; background-repeat: no-repeat; background-size: contain;

score 1 · Answer 3 · answered Jun 30 '20 at 14:58

Ok, none of that worked, but I came across another suggestion, namely placing internal style sheet ref in HTML:

<div id="logo-area" style="background-image: url(vendors/img/background.jpg); background-repeat: no-repeat;">

That finally worked! Thanks

score 0 · Answer 4 · answered Jun 30 '20 at 14:24

0

I am not sure what can be wrong with it, I copy relative path in VS code and paste it after url(....

seems too straightforward to fail?

answered Jun 30 '20 at 14:24

Dorotex

21
3

Please don't use answers for comments or additions to the question. Instead, edit your question to add pertinent information. – Heretic Monkey Jun 30 '20 at 14:29

Background image not showing in CSS/ HTML

4 Answers4