Building a bootstrap header and banner

Question

first of all, I am an absolute beginner with bootstrap 4 and actually building a website to train.

I want to create a header with black background and light text as well as an banner with light text and image as background.

My problem is that the backgroung does not change and I can't find the mistake in my CSS and HMTL.

Attached both snippets with the hope someone could help me.

Thanks a lot!

Best!

HTML:

<body>

  <!-- header -->
  <header>

   <!-- navbar -->
   <!-- end navbar -->


   <!-- banner -->
   <div class="text-light text-right banner">
     <h1 class="display-4 banner-heading">Welcome to <span class="text-uppercase">Photo</span> <span class="display-3">X</span></h1>
     <p class="lead banner-par">lorem ipsem est egna nebdevnebdbe</p>
   </div>
   <!-- end banner -->
  </header>
  <!-- end header -->

CSS:

body {
  font-family: 'Montserrat', sans-serif;
}


/* header */

header {
  height: 100vh;
  background: linear-gradient(rgba(0, 0, 0, .4), rgba(0, 0, 0, .5)) url(images/header-img.jpeg) no-repeat center center /cover;
}

/* navbar */
/* end navbar */


/* banner */
.banner {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
/* end banner */

/* end header */

score 0 · Answer 1 · answered Nov 07 '18 at 09:06

As i inspected your code it stated that background is not a valid property, so in order to use linear gradient and background together u need to separate these two attributes with ',' (comma) as stated below:

 background: linear-gradient(rgba(0, 0, 0, .4), rgba(0, 0, 0, .5)) , url(images/header-img.jpeg) no-repeat center center /cover;

Building a bootstrap header and banner

1 Answers1