Here is a code example: HTML:
<div class=bg-img> <p> Lorem Ipsum. </p> </div> CSS:
.bg-img { background-img: url(); background-repeat: no-repeat; background-position: center; background-size: cover; opacity: 0.8; } p { color: white; } So I don't think what you are asking is directly possible, but here's a way to get the effect you are looking for.
Seperate your content from the div that contains the background. Then wrap both of those in a container div and set that div to position: relative;
Now take your content and give it this code:
position: absolute; top: 0; left: 0; Look what I did here:
.bg-img { background-image: url(https://external-content.duckduckgo.com/iu/?u=https%3A%2F%2Ftse3.mm.bing.net%2Fth%3Fid%3DOIP.VKpiZHX8o1MQRM3NLjQaGQHaE8%26pid%3DApi&f=1&ipt=46d3f722b06b0265f5e520392239e52a3b5e8a19f77a81b52fea18d43b5df116&ipo=images); background-repeat: no-repeat; background-position: center; background-size: cover; height: 250px; opacity: 0.5; } .contain { position: relative; } .contain p { position: absolute; top: 0; left: 0; }<div class="contain"> <div class=bg-img></div> <p> Lorem Ipsum. </p> </div>