CODEWITHSUNDEEP
htmlcssbackground-image
Dorotex
Dorotex

Reputation: 21

Background image not showing in CSS/ HTML

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.

Upvotes: 1

Views: 252

Answers (4)

Macky
Macky

Reputation: 11

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;

Upvotes: 1

Dorotex
Dorotex

Reputation: 21

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

Upvotes: 1

Dorotex
Dorotex

Reputation: 21

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?

Upvotes: 0

Scarl3tt
Scarl3tt

Reputation: 9

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.

Upvotes: 1

Related Questions