Untitled

<!DOCTYPE html>
<html>

  <head>
    <link rel="stylesheet" href="style.css">
    <script src="script.js"></script>
  </head>

  <body>
    <div class="hero-wrapper">
      <div class="bg"></div>
      <div class="text">
        <h1>Hello Plunker!</h1>
      </div>
    </div>
  </body>

</html>

// Code goes here

/* Styles go here */
html, body {
  height: 100%;
  width: 100%;
  padding: 0;
  margin: 0;
}

body {
  background-color: #333333;
}

.hero-wrapper {
  position: relative;
  width: 100%;
  height: 250px;
}

.hero-wrapper > .bg {
  background: url(http://backgroundidea.info/wp-content/uploads/2015/06/black-and-grey-grunge-backgrounds-black-background-free-hd-download---black-grunge-background-free--overview.jpg);
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  z-index: 0;
  opacity: 0.3;
}

.hero-wrapper > .text {
  position: relative;
  z-index: 10;
  color: #fff;
}

h1 {
  margin: 0;
}

# Set opacity of div background to transparent without changing text
[StackOverflow](http://stackoverflow.com/questions/37093709/set-opacity-of-div-background-to-transparent-without-changing-text/37093793?noredirect=1#comment61731423_37093793)