How to give full page background image and control its opacity using CSS?

Question

I want to set an image as the background for the whole page but also want to control its opacity using CSS without affecting the opacity of the content. Is it possible and if yes then how can I do it?

Currently what I have done is set the image as background using html tag, but because of that when I change opacity, the content is also affected.

html {
  background: url(https://picsum.photos/400/400); 
  /*  This image is used as an example  */
  background-size: cover;
  background-repeat: no-repeat;
  opacity: 0.5
  /* Changing opacity like this also changes it for the whole content because html tag is used */
}

<h1>This is a heading</h1>
<p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. A possimus, odio iusto libero cupiditate soluta minima quis in, officiis quod, quia laudantium deserunt veniam neque alias facere ipsam. Neque modi, atque animi pariatur reprehenderit nesciunt possimus, perspiciatis distinctio, earum corporis ipsam illo impedit maxime doloremque ad quod temporibus laboriosam quasi?</p>

<h1>This is a heading</h1>
<p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. A possimus, odio iusto libero cupiditate soluta minima quis in, officiis quod, quia laudantium deserunt veniam neque alias facere ipsam. Neque modi, atque animi pariatur reprehenderit nesciunt possimus, perspiciatis distinctio, earum corporis ipsam illo impedit maxime doloremque ad quod temporibus laboriosam quasi?</p>

<h1>This is a heading</h1>
<p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. A possimus, odio iusto libero cupiditate soluta minima quis in, officiis quod, quia laudantium deserunt veniam neque alias facere ipsam. Neque modi, atque animi pariatur reprehenderit nesciunt possimus, perspiciatis distinctio, earum corporis ipsam illo impedit maxime doloremque ad quod temporibus laboriosam quasi?</p>

Answer 1

I would wrap your content inner div. Then you can work with position too handle the opacity without affecting the background image.

* {
  margin: 0px; 
  padding: 0px;
}

.bg-img:after {
    content:'';
    background: url('https://picsum.photos/400/400') no-repeat center center;
    position: absolute;
    background-size: cover;
    background-repeat: no-repeat;  
    top:0px;
    left: 0px;
    width:100%;
    height:100%;
    z-index:-1;
    opacity: 0.2; /* Here is your opacity */
}
.bg-img {
    position: relative;
    width:100%;
    padding:50px;
    font-weight:bold;
    text-align:center;
}

<div class="bg-img">
  <h1>This is a heading</h1>
  <p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. A possimus, odio iusto libero cupiditate soluta minima quis in, officiis quod, quia laudantium deserunt veniam neque alias facere ipsam. Neque modi, atque animi pariatur reprehenderit nesciunt possimus, perspiciatis distinctio, earum corporis ipsam illo impedit maxime doloremque ad quod temporibus laboriosam quasi?</p>

  <h1>This is a heading</h1>
  <p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. A possimus, odio iusto libero cupiditate soluta minima quis in, officiis quod, quia laudantium deserunt veniam neque alias facere ipsam. Neque modi, atque animi pariatur reprehenderit nesciunt possimus, perspiciatis distinctio, earum corporis ipsam illo impedit maxime doloremque ad quod temporibus laboriosam quasi?</p>

  <h1>This is a heading</h1>
  <p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. A possimus, odio iusto libero cupiditate soluta minima quis in, officiis quod, quia laudantium deserunt veniam neque alias facere ipsam. Neque modi, atque animi pariatur reprehenderit nesciunt possimus, perspiciatis distinctio, earum corporis ipsam illo impedit maxime doloremque ad quod temporibus laboriosam quasi?</p>

</div>