how to fade my background but not the text?

Question

I wanted to start my blog but also I wished to make my own website. I just learnt how to do that using Codecademy. My question is how to fade my background but not the text ? I found a lot of solutions but none of them worked for me. My website: http://beingatechnocrat.me/ HTML code:

<article>
  <div class="post" style="background-image: url(http://www.planwallpaper.com/static/images/HD-Wallpapers1_FOSmVKg.jpeg)">
    <div class="product">
      <h3>The Monarch</h3>
      <p>The Monarch Bike is our original beach cruiser. It's perfect for strolling bike rides down beach promenades and small enough to stash just anywhere.</p>
      <a href="#" class="btn">Read More</a>
    </div>
  </div>
</article>

CSS code:

.post {
  background-size: cover;
  background-attachment: fixed;
  height: 100%;
  position: relative;
  width: 100%;
  z-index: 1;
  background-position: center;
  opacity: 0.3;
}

Answer 1

You can apply the background to a pseudo element instead, and use opacity on the pseudo element

 .post { height: 100%; width: 100%; z-index: 1; } .background { position: relative; } .background:after { position: absolute; top: 0; left: 0; right: 0; bottom: 0; content: ''; background-image: url(http://www.planwallpaper.com/static/images/HD-Wallpapers1_FOSmVKg.jpeg); background-size: cover; background-attachment: fixed; background-position: center; opacity: 0.3; z-index: -1; } 

 <div class="post background"> <div class="product"> <h3>The Monarch</h3> <p>The Monarch Bike is our original beach cruiser. It's perfect for strolling bike rides down beach promenades and small enough to stash just anywhere.</p> <a href="#" class="btn">Read More</a> </div> </div>