How to make background image semi-transparent while the contents remain fully opaque

Question

body {
  display: flex;
  height: 100vh;
  margin: 0;
  padding: 0;
}

.chat__body {
  position: relative;
  flex: 1;
  background: #efeae2;
}

.chat__body .background {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background-image: url('https://www.rd.com/wp-content/uploads/2021/04/GettyImages-10100201-scaled.jpg');
  background-size: contain;
  opacity: 0.4;
  z-index: 1;
}

.chat__body .content {
  z-index: 2;
}

<div class='chat__body'>
  <div class='background'></div>
  <div class='content'>
    <p>Test</p>
  </div>
</div>

With my current code, the div that contains the background image seems to be on top of the content. I tried to control this with the z-index but it's not working. I want the semi-transparent background to not affect the contents - right now it's covering the text and you can't even select the text anymore.

score 1 · Accepted Answer · answered Sep 22 '22 at 21:00

add position relative to content so its z-index would take effect

body {
  display: flex;
  height: 100vh;
  margin: 0;
  padding: 0;
}

.chat__body {
  position: relative;
  flex: 1;
  background: #efeae2;
}

.chat__body .background {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background-image: url('https://www.rd.com/wp-content/uploads/2021/04/GettyImages-10100201-scaled.jpg');
  background-size: contain;
  opacity: 0.1;
  z-index: 1;
}

.chat__body .content {
  position: relative;
  z-index: 2;
}

<div class='chat__body'>
  <div class='background'></div>
  <div class='content'>
    <p>Test</p>
  </div>
</div>

How to make background image semi-transparent while the contents remain fully opaque

1 Answers1