Background Image opacity not working [HTML/CSS]

Question

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>

https://scotch.io/tutorials/how-to-change-a-css-background-images-opacity — safin chacko, Sep 06 '16 at 04:12
tried this. This is an image and so it works. I dont want to set it as an image I want the whole body background to be opaque and keep the content in the body visible. — Neha Bajpai, Sep 06 '16 at 04:15
Have a look at this http://stackoverflow.com/questions/7241341/can-i-set-an-opacity-only-to-the-background-image-of-a-div This seems to be exactly what you are looking for. — Manish, Sep 06 '16 at 04:33

score 2 · Accepted Answer · answered Sep 06 '16 at 04:22

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.

ah! that worked, I dont know I was trying the same way, but it didnt seem to work then, Thank you!! :) — Neha Bajpai, Sep 06 '16 at 04:37

score 0 · Answer 2 · answered Sep 06 '16 at 04:13

You forgot a semi-colon after opacity, as well as it's measured in percentage. Fixed code is as follows:

<!DOCTYPE html>
<html>
<head>
    <title></title>
<style type="text/css">
body {
  z-index: -1;
  opacity: 90%;
}
</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>

score 0 · Answer 3 · edited May 23 '17 at 12:09

0

Convert to PNG and make the original image 0.2 opacity

because if u give opacity for body...it will effect to all contents inside the body including bg image.

CSS: set background image with opacity?

edited May 23 '17 at 12:09

Community

1
1

answered Sep 06 '16 at 04:23

safin chacko

1,345
1
11
18

score 0 · Answer 4 · answered Sep 06 '16 at 04:32

Opacity applies to entire container and thus resulting the effect in either the background and the content.

A good solution is to use a PNG with your desired level of opacity and apply it to a child container. In your case, you can apply to your .container.

With using this method, you can easily switch the background image anytime you need without worrying about its opacity level:

.container{
  background-image: url('transparent.png');
}

The transparent.png image will be place on top of your background image.

score 0 · Answer 5 · answered Sep 06 '16 at 04:33

Another way to do this:

   

 <head>
            <title></title>
        <style type="text/css">
        .my-container {
          z-index: -1;
          opacity: 0.2;
          position: absolute;
        }
        </style>
        </head>
        <body>
        <div class="my-container">
            <img src='http://placekitten.com/1500/1000'>
        </div>
        
        <div class="container">  
        <article>
            <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>

score 0 · Answer 6 · answered Sep 06 '16 at 05:21

try use alpha filter in your section or background div, doest work if u link img on div and set opacity on body,

try this

.youclass {
       background-image:url(../img/welovecats.jpg);
       opacity:0.60;
      -moz-opacity: 0.60;
       filter: alpha(opacity=0.6);
       background-repeat: no-repeat;
       background-attachment: fixed;
       background-size: 100%;}

html

<html>
<body>
    for section
<section class="youclass">
      content
</section>
</body>
</html>

use body for only main items like data-target, scroll scripts, normalizes and other stuffs

Background Image opacity not working [HTML/CSS]

6 Answers6