CODEWITHSUNDEEP
htmlcss
Neha Bajpai
Neha Bajpai

Reputation: 167

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>

Upvotes: 2

Views: 6571

Answers (6)

Lu&#237;s Ant&#244;nio de Melo
Lu&#237;s Ant&#244;nio de Melo

Reputation: 9

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

Upvotes: 0

aavrug
aavrug

Reputation: 1889

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>

Upvotes: 0

SG_Rowin
SG_Rowin

Reputation: 622

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.

Upvotes: 0

safin chacko
safin chacko

Reputation: 1390

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?

Upvotes: 0

JayMartin
JayMartin

Reputation: 118

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.

Upvotes: 2

Ian
Ian

Reputation: 5

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>

Upvotes: 0

Related Questions