Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

CSS

Mark Libario
Mark Libario
9,003 Points
Posted by Mark Libario
Mark Libario
9,003 Points

Bootstrap Jumbotron Overlay 50% opacity help

I wanted my background image on my jumbotron header to have a black background overlay that is 50% but i cant seem to get it to work. What do i need to do???

<!DOCTYPE html>
<html lang="en">
  <head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" integrity="sha384-rwoIResjU2yc3z8GV/NPeZWAv56rSmLldC3R/AZzGRnGxQQKnKkoFVhFQhNUwEyJ" crossorigin="anonymous"><link rel="stylesheet" href="css/style.css">
  </head>
  <body>
    <!-- Navbar -->
    <ul class="nav justify-content-center">
      <li class="nav-item">
        <a class="nav-link active" href="#">Active</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Link</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Link</a>
      </li>
      <li class="nav-item">
        <a class="nav-link disabled" href="#">Disabled</a>
      </li>
    </ul>
    <!-- /Navbar -->

    <!-- Jumbotron-->
    <div class="jumbotron bg-img text-white bg-overlay text-center">
      <h1 class="display-2">Hello, world!</h1>
      <p class="lead">This is a simple hero unit, a simple jumbotron-style component for calling extra attention to featured content or information.</p>
      <hr class="my-4">
      <p>It uses utility classes for typography and spacing to space content out within the larger container.</p>
      <p class="lead">
        <a class="btn btn-primary btn-lg" href="#" role="button">Learn more</a>
      </p>
    </div>
    <!-- /Jumbotron -->


    <h1>Hello, world!</h1>

    <!-- jQuery first, then Tether, then Bootstrap JS. -->
    <script src="https://code.jquery.com/jquery-3.1.1.slim.min.js" integrity="sha384-A7FZj7v+d/sdmMqp/nOQwliLvUsJfDHW+k9Omg/a/EheAdgtzNs3hpfag6Ed950n" crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.4.0/js/tether.min.js" integrity="sha384-DztdAPBWPRXSA/3eYEEUWrWCy7G5KFbe8fFjk5JAIxUYHKkDx6Qin1DkWx51bBrb" crossorigin="anonymous"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/js/bootstrap.min.js" integrity="sha384-vBWWzlZJ8ea9aCX4pEW3rVHjgjt7zpkNpZk+02D9phzyeVkE+jo0ieGizqPLForn" crossorigin="anonymous"></script>
  </body>
</html>

This is the additional CSS file i made for the bg-img.

.bg-img {
  background-image: url("http://anyhdwallpaper.com/wp-content/uploads/2016/04/Snowy-Mountains-High-Resolution-Wallpaper.jpg");
  background-size: cover;
  background-position: center center;
  background-attachment: fixed;
  background-repeat: no-repeat;
  min-height: 640px;
  z-index: -10;
}

.bg-overlay
{
  position: relative;
  background-image: rgba(0,0,0,0.5);
  z-index: -5;
}

2 Answers

Jacob Tollette
Jacob Tollette
27,884 Points
Jacob Tollette
Jacob Tollette
27,884 Points

Have you tried created a pseudo element, setting it's position to absolute, making it the same size, and putting it's z-index above the target element?

ex:

.bg-img {
  background-image: url("http://anyhdwallpaper.com/wp-content/uploads/2016/04/Snowy-Mountains-High-Resolution-Wallpaper.jpg");
  background-size: cover;
  background-position: center center;
  background-attachment: fixed;
  background-repeat: no-repeat;
  min-height: 640px;
  z-index: -10; /* necessary? is this positioned relative or absolute elsewhere? */
 position: relative;
}

.bg-img::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(20, 20, 20, .5);
  z-index: -9 /*Moved one position above the -10 */
}

I set the position to absolute and explicitly set the top, left, right, and bottom to 0 so that it'll fill the container. Normally, I'd have sizing on the parent element (the one positioned relative); however, I don't know if you have that set somewhere else or not. This should work.

Also, I noticed a z-index on the .bg-img. Unless there's another class with a position property set to absolute or relative, the z-index doesn't have any effect as the default position is "static".

This should get you going.

Douglas Rouse
Douglas Rouse
899 Points
Douglas Rouse
Douglas Rouse
899 Points

what is wrong with this code <section> <ul> <li><a href="img/numbers-01.jpg"</a></li> <li><a href="img/numbers-02.jpg"</a></li> <li><a href="img/numbers-06.jpg"</a></li> </ul> </section>

Mark Libario
Mark Libario
9,003 Points
Mark Libario
Mark Libario
9,003 Points

You typed the first section wrong my friend :)

Jacob Tollette
Jacob Tollette
27,884 Points
Jacob Tollette
Jacob Tollette
27,884 Points

You didn't close your anchor tags.

<section>
    <ul>
        <li><a href="img/numbers-01.jpg" </a></li>
        <li><a href="img/numbers-02.jpg" </a></li>
        <li><a href="img/numbers-06.jpg" </a></li>
    </ul>
</section>

Should be:

<section>
    <ul>
        <li><a href="img/numbers-01.jpg">LINK DESC</a></li>
        <li><a href="img/numbers-02.jpg">LINK DESC</a></li>
        <li><a href="img/numbers-06.jpg">LINK DESC</a></li>
    </ul>
</section>