How to set only the background image in CSS to opacity and nothing else

Question

I need a little bit help on how to set just the background image to opacity of .5 and nothing else. I am using grid so anything I put in there is opaque and unfortunately I cant seem to find any help on Google either to explain how to bypass everything but the image.

.grid {
display: grid;
grid-template-areas: 
"one two three"
"one two three"
"one two three";
grid-template-columns: 1fr 2fr 1fr;
grid-template-rows: repeat(3, 310px);
}

.title {
font-family: 'Chelsea Market', cursive;
font-size: 30px;
text-align: center;
 }

.one {
background-color: tomato;
grid-area: one;
}

.two {
background-image: url(./henry-perks-TStCoAiFjDY-unsplash.jpg);
background-size: cover;
background-repeat: no-repeat;
background-position: center;
opacity: .5;
grid-area: two;
}


<body>
<div class="grid">
    <div class="one"></div>
    <div class="two">

        <h2 class="title">CJs Pizza Place</h2>

    </div>
    <div class="three"></div>


   </div>

 </body>

could you be a little more descriptive ? you just said you wanted to set your picture to opacity, and it looks like you did it. Where's the mistake ? — CanUver, May 30 '20 at 08:46
@CanUver It does turn the image opaque but I am trying to not have anything else in that grid opaque only the picture — DevOps_N_Training, May 30 '20 at 09:06

score 0 · Accepted Answer · answered May 30 '20 at 08:51

You can use pseudo ::after and give background image properties to that.

Also make sure this pseudo element is absolute positioned with 100% of width and height. And your actual div is relative positioned.

Just like

.grid {
  display: grid;
  grid-template-areas: "one two three" "one two three" "one two three";
  grid-template-columns: 1fr 2fr 1fr;
  grid-template-rows: repeat(3, 310px);
}

.title {
  font-family: 'Chelsea Market', cursive;
  font-size: 30px;
  text-align: center;
}

.one {
  background-color: tomato;
  grid-area: one;
}

.two {
  
  position: relative;
  grid-area: two;
}

.two::after {
  background-image: url('https://earthsky.org/upl/2018/06/sun-pillar-6-25-2018-Peter-Gipson-sq.jpg');
   background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
  opacity: .5;
  content: "";
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
}

<body>
  <div class="grid">
    <div class="one"></div>
    <div class="two">

      <h2 class="title">CJs Pizza Place</h2>

    </div>
    <div class="three"></div>


  </div>

</body>

Thanks but it still seems like my title (h1) is still opaque. — DevOps_N_Training, May 30 '20 at 09:11

How to set only the background image in CSS to opacity and nothing else

1 Answers1