Neha Bajpai Neha Bajpai - 3 months ago 13
CSS Question

Background Image opacity not working [HTML/CSS]

I am trying to set my background image to opaque keeping the content clearly visible. So far what I have tried do not seem to work. Here is my code. Any suggestions would be of great help





<head>
<title></title>
<style type="text/css">
body {
z-index: -1;
opacity: 0.9;
}
</style>
</head>
<body class="my-container" style="background-image: url('http://placekitten.com/1500/1000');">

<div class="container">

<h2>Scotch Scotch Scotch</h2>
<p>In the criminal justice system, the people are represented by two separate yet equally important groups. The police who investigate crime and the district attorneys who prosecute the offenders. These are their stories.</p>

<p>Look for the Union Label when you are buying a coat, dress, or blouse. Remember, somewhere our union's sewing, our wages going to feed the kids, and run the house. We work hard, but who's complaining. Thanks to the I.L.G. we're paying our way. So always look for the Union Label. It means we're able to make it in the U.S.A.!</p>

</article>


</div>

</body>




Answer

Here's a hacky way to do it...

<!DOCTYPE html>
<html>
<head>
    <title></title>
<style type="text/css">
body {
  z-index: -1;
  opacity: 20%;
}
</style>
</head>
<body class="my-container" style="background-image: url('https://jaymartmedia.com/example/kitten.png');">

<div class="container">  

    <h2>Scotch Scotch Scotch</h2>
  <p>In the criminal justice system, the people are represented by two separate yet equally important groups. The police who investigate crime and the district attorneys who prosecute the offenders. These are their stories.</p>

<p>Look for the Union Label when you are buying a coat, dress, or blouse. Remember, somewhere our union's sewing, our wages going to feed the kids, and run the house. We work hard, but who's complaining. Thanks to the I.L.G. we're paying our way. So always look for the Union Label. It means we're able to make it in the U.S.A.!</p>

</article>


</div>

</body>
</html>

Not optimal, but it's quick and easy, all I did was add opacity using an image editor.

Please download the image here.

https://jaymartmedia.com/example/kitten.png

Hope this helps.