ilee ilee - 1 month ago 10
CSS Question

Background image not appearing in CSS using Bootstrap

I'm fairly new to web development and have been trying to make a website using Bootstrap, hosted on github. The bootstrap theme I'm using has a header section which I'm trying to cover with a background image (it was originally just a solid color), however the image doesn't appear.

Here is my code:
HTML - header section:

<header class="masthead" id="banner">
<div class="container">
<div class="col-lg-12 text-center">
<img class="img-fluid" src="img/headshot.png" alt="Headshot">
<div class="intro-text">
<span class="name">NAME</span>
<hr class="star-light">
</div>
</div>
</div>
</header>


CSS:

header.masthead {
text-align: center;
color: white;
background: #148ABC;}

#banner {
background-image: url("/img/banner.jpg") no-repeat center;
background-size: cover;
width: 100%;
height: 100%; }


My "banner.jpg" file which is the background image is located in at "img" folder, which is in the same directory as a "css" folder that contains the actual css file. I've tried the following:


  • changing the url to "/img/banner.jpg", "../img/banner.jpg" and "img/banner.jpg" (I think the first one is still right?)

  • removing the #banner id and putting everything in css under header.masthead alone

  • deleting the width and height

  • double checking the name of the file (it is banner.jpg)



I've been working on this for days so I'm pretty frustrated with myself. Thanks for your help!

Answer Source

Just try with this snippet , i have changed background-image to background and remove the background color of the header

header.masthead {
  text-align: center;
  color: white; 
}

#banner {
  background: url("https://www.w3schools.com/css/trolltunga.jpg") center center no-repeat; 
  background-size: cover; 
  width: 100%;
  height: 100%; }
<header class="masthead" id="banner">
  <div class="container">
    <div class="col-lg-12 text-center">
      <img class="img-fluid" src="img/headshot.png" alt="Headshot">
      <div class="intro-text">
        <span class="name">NAME</span>
        <hr class="star-light">
      </div>
    </div>
  </div>
</header>