0

I'm wondering if it's possible to do away with my second div/class opacity and add the opacity to the image using CSS on the hero class?

.hero {
  background-image: url('https://cdn10.bostonmagazine.com/wp-content/uploads/sites/2/2016/03/nkotb.jpg');
  background-size: cover;
  position: relative;
  height: 500px;
}

.hero .opacity {
  background-color: rgba(0, 0, 0, 0.5);
  height: 100%;
}
<div class="hero">
  <div class="opacity">
  </div>
</div>
Daniel Williams
  • 2,195
  • 7
  • 32
  • 53

1 Answers1

2

You can use multiple background images, which are supported by all modern browsers.

.hero {
  background-image: linear-gradient(to bottom, rgba(0,0,0,0.5) 0%,rgba(0,0,0,0.5) 100%),
      url('https://cdn10.bostonmagazine.com/wp-content/uploads/sites/2/2016/03/nkotb.jpg');
  background-size: cover;
  color: white;
  position: relative;
  height: 500px;
}
<div class="hero">Some content</div>
fubar
  • 16,918
  • 4
  • 37
  • 43
  • This works great except that if I add content to the div to sit on top of the hero image, it actually sits behind the opacity layer. – Daniel Williams Oct 18 '18 at 01:36
  • Ah okay, I didn't realise that was a requirement. In that case, see my updated answer. – fubar Oct 18 '18 at 01:44