I want to play with the opacity of the background image in the code using pseudo element. How do I do that?

If I use the code below, the background image becomes fully opaque, and if use the opacity property, it reduces the opacity of the text in the background also. How do I reduce the opacity of only the background image without affecting the text on it? Below is the html code:

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {}

p.paragraph {
  background-image: url("background.jpg");
  background-repeat: no-repeat;
  background-size: 100% 100%;
  font-family: sans-serif;
  color: red;
  font-size: 20px;
  border: 3px solid green;
  margin: 12px auto;
  padding: 10px;
  text-align: justify;
  width: 800px;
}

h1.heading {
  margin: 20px;
  text-align: center;
  color: #8a2ea3;
  font-size: 40px;
}

<!DOCTYPE html>
<html>

<head>
  <title>CSS Practice</title>
  <meta charset="utf-8" />
  <meta name="viewport" content="width: device-width, initial-scale: 1.0" />
  <link rel="stylesheet" name="text/css" href="index.css">
  <link rel="icon" name="x-icon/image" href="wv.png">
</head>

<body>
  <h1 class="heading">Lorem Ipsum</h1>
  <p class="paragraph">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor
    in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
  </p>
</body>

</html>

Solution

It is not possible to use opacity, without making content transparent. So I would style element to be background image and different one with content.

#bgContent {
  position: relative;
  width: 200px;
  height: 200px;
  overflow: hidden;
}

#bgContent img {
  position: absolute;
  width: 100%;
  opacity: .5;
  z-index: 1;
}

#bgContent div {
  position: relative;
  z-index: 2;
}

<div id="bgContent">
  <img src="https://via.placeholder.com/300.png/09f/fff%20C/O%20">
  <div>Hi this is my content</div>
</div>