Background image not appearing in CSS using Bootstrap

Question

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!

folder path "../img/banner.jpg" is the right one.

RaJesh RiJo
– RaJesh RiJo

2017-08-17 04:32:55 +00:00
Commented Aug 17, 2017 at 4:32 — RaJesh RiJo
– RaJesh RiJo, Commented Aug 17, 2017 at 4:32
Silly qustion - Have you cleared the browser's cache?

Koby Douek
– Koby Douek

2017-08-17 04:37:30 +00:00
Commented Aug 17, 2017 at 4:37 — Koby Douek
– Koby Douek, Commented Aug 17, 2017 at 4:37
I've done both, but it hasn't helped unfortunately

ilee
– ilee

2017-08-17 04:42:07 +00:00
Commented Aug 17, 2017 at 4:42 — ilee
– ilee, Commented Aug 17, 2017 at 4:42

Jishnu V S · Accepted Answer · 2017-08-17 04:50:16Z

1

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>

edited Aug 17, 2017 at 4:50

answered Aug 17, 2017 at 4:44

Jishnu V S

8,4377 gold badges30 silver badges59 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

ilee Over a year ago

thanks so much, this works! any idea why I can't just put an image as background cover over a background color?

RaJesh RiJo · Accepted Answer · 2017-08-17 04:42:04Z

0

You cannot have no-repeat and cover on background-image as they are property of background. So you can have only image url on background-image.

And also try removing fallback background on header.masthead.

Try below [fiddler][1] for reference.

  [1]: https://jsfiddle.net/rajsnd08/qcwvet4p/

edited Aug 17, 2017 at 4:42

answered Aug 17, 2017 at 4:38

RaJesh RiJo

4,4005 gold badges27 silver badges46 bronze badges

2 Comments

ilee Over a year ago

This didn't work. Now I've got a white page with no image as well

RaJesh RiJo Over a year ago

If your files are located like this, html--root--> css--root-->css--> image--root-->img--> Then you are suppose to use ../img/image.format

Collectives™ on Stack Overflow

Background image not appearing in CSS using Bootstrap

2 Answers 2

1 Comment

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related