Another CSS background image not showing, is my code wrong?

user_16873201 0
Viewed 68

Good day to you all,

I've been looking all over the place to figure this problem out. But I can't, and it makes me believe there is something else going on. Let's see.

I would wish to write a code for a banner on my Wordpress Bootstrap website. www.visionalmind.com This banner ought to be placed just below the navbar, and for this I've made a within a full-width container. The class includes the image itself.

My desire is to make a banner like this: https://www.w3schools.com/Css/tryit.asp?filename=tryresponsive_image_background3

This is the CSS for header_banner:

.header_banner{
  max-width: 100%!important;
  margin: auto!important;
  width: 100%!important;
  max-height: 1080px!important;
  background-repeat: no-repeat!important;
  background-attachment: fixed!important;
  background-size:cover!important;
  background-image: url('https://www.visionalmind.com/wp-content/themes/visionaltheme/media/photo-1499951360447-b19be8fe80f5.png');
}

HTML:

<div class="container-fluid bg-darkblue">
  <div class="row mt-5">
    <div class="container pad_over">
      <a class="header_banner"></a>
    </div>
  </div>
</div>

I've tried the following.

  • Tried to use the 'background' property in place of 'background-image' property.
  • Tried using HTML instead by using This worked, but I get stretching problems. I'm open for ideas.
  • I've loaded the URL in my url bar to check if the image works, it does.
twitter-bootstrap wordpress background-image css html
1 Answers

There were a few small problems here. You were trying to attach the background the an "a" tag instead of a "div," and you also didn't assign a height to it.

#headerBanner {
  width: 100%;
  height: 400px;
  max-width: 100%;
  max-height: 1080px;
  background-image: url('https://www.visionalmind.com/wp-content/themes/visionaltheme/media/photo-1499951360447-b19be8fe80f5.png');
  background-size: cover;
  background-repeat: no-repeat;
  background-attachment: fixed;
}

<div class="container-fluid bg-darkblue">
  <div class="row mt-5">
    <div class="bannerContainer pad_over">
      <div id="headerBanner"></div>
    </div>
  </div>
</div>

Check it working on JSFiddle

user_165213810
Related