Opacity of background picture in HTML-CodePudding

Can I change the opacity of the background picture in HTML? If yes then please share the coding. I found one solution online but in that a box was added on top of the background picture and the box's opacity was changed hence changing the opacity of the background picture.

<!DOCTYPE html>
<html>
 <head>
  <style>


body{
            background-image: url("C:/Users/Pragya/Documents/helpinghand.jpg");
            background-repeat: no-repeat;
            background-size: 100% 100%;
        
        }



.div1{
            text-align: center;
            font-size: 30px;
            font-family: 'Rubik', sans-serif;
            margin: 30px;
            background-color: #ffffff;
            border: 1px solid black;
            opacity: 0.8;
              
        }

  </style>
 </head>
 <body>
  <div >
    <p> HERE THE TEXT AND OTHER PARAGRAPH WILL BE ADDED.</p>
  </div>
 </body>
</html>

CodePudding user response：

You can change the opacity with CSS on the image itself, however it will change the opacity for the child elements too.

So I would do it as following, create a wrapper element with position relative. Then add an extra background div that will stretch over the relative wrapper, functioning as a background image for the content div. Now you can change opacity on the image.

.wrapper {
  position: relative;
}
.wrapper .background {
  background-image: url("http://uploads.refuzion.nl/stock.jpeg");
  background-repeat: no-repeat;
  background-size: 100% 100%;
  opacity: 0.3;
  width: 100%;
  height: 100%;
  position: absolute;
}
.div1 {
  text-align: center;
  font-size: 30px;
  font-family: 'Rubik', sans-serif;
  margin: 30px;
  background-color: #ffffff;
  border: 1px solid black;
}

<!DOCTYPE html>
<div >
<div ></div>
<div >
  <p> HERE THE TEXT AND OTHER PARAGRAPH WILL BE ADDED.</p>
</div>
</div>

That being said the code you've included with your answer already functions as expected and basically does the same result as my solution.

CodePudding user response：

enter image description here

please use this css for that

img { opacity: 0.5;}