transparent background image without turning the content transparent

Question

I have a background for the entire body of my page. Inside the body, I have a form that has another background image specifically for it. I want the background of that form to be slightly transparent so I could see the <body> background image.

What my code does:

makes the background and the content within the form both transparent

What I want to happen:

only make the background image slightly transparent and the text for content within it to remain at 100% opacity.

<style>
    #mainbody{
        background-image: url("/images/forest3.jpg");
        background-repeat: no-repeat;
        background-size: auto;
        background-size: 100% 100%;
        min-height: 700px;
        opacity: .5;
    }
    #mainbodyContent{
        opacity: 1;
    }
    body{
        background-repeat: no-repeat;
        background-size: cover;
        background-image: url("/images/trianglify/trianglifyBlue.png");
    }
</style>

<body>
    <div id="mainbody">
       <div id="mainbodyContent">
           ...some content
        </div>
    </div>
</body>

aditional info:

bootstrap 4.6

A png, you mean, yes all you need to do is use png pics ‍♀️‍♀️ — Ernesto, Aug 14 '21 at 01:09
I tried that as well. it still turns the content within the transparent. What I want to happen is:: solid background with a smaller transparent image on top. the smaller image has content on it. But the content is not transparent. — jgrewal, Aug 14 '21 at 01:19
You mean a water mark ?https://github.com/brianium/watermarkjs — Ernesto, Aug 14 '21 at 02:12
The easiest is once you set yow pic where you want it add an img { opscity: 0.4;} 1 been 100% visible — Ernesto, Aug 14 '21 at 02:14

score 2 · Accepted Answer · answered Aug 14 '21 at 02:43

In such cases, use a pseudo-element by stretching it to the size of the block and setting the necessary styles.

body {
  background-repeat: no-repeat;
  background-size: cover;
  background-image: url("https://i.stack.imgur.com/GEVAe.png");
}

#mainbody {
  position: relative;
  min-height: 700px;
  color: yellow;
}

#mainbody::before {
  content: "";
  position: absolute;
  top: 0; right: 0; bottom: 0; left: 0; z-index: -1;
  background-image: url("https://i.stack.imgur.com/57ffF.jpg");
  background-repeat: no-repeat;
  background-size: 100% 100%;
  opacity: 0.5;
}

#mainbodyContent {
  color: white;
}

<body>
  <div id="mainbody">
    ... some content in "#mainbody"
    <div id="mainbodyContent">
      ... some content in "#mainbodyContent"
    </div>
  </div>
</body>

transparent background image without turning the content transparent

1 Answers1