How to put 2 background-image being one of them semi-transparent

Asked

Viewed 72 times

1

Summary: I need to put two background 1 on top of the other one and the top one should be semi-transferred so that the background appears below and without affecting the other elements of the page background-screen2 background-screen1

 .background-screen2{
background-image: url("https://images.pexels.com/photos/949587/pexels-photo-949587.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500");
 background-size: auto;
 opacity:0.6
}
    
.background-screen1
{
     background-image:  url("https://definicao.net/wp-content/uploads/2018/10/significado-de-background-810x506.jpeg");
    background-size: auto;
    
}
<div class="background-screen1  background-screen2">
  <p>Hello</p>
  <p>Hello</p>
  <p>Hello</p>
  <p>Hello</p>
  <p>Hello</p>
</div>

css

  • You’ll probably have to use two divs, one on top of the other, styling the background of each.

1 answer

2


There is no way to apply opacity to background-image. In this case you could create a pseudo-element ::before floating and applying opacity to it. It is also necessary that all elements within the div have position: relative so that the pseudo-element created is not on top of them:

.background-screen{
   position: relative;
   background-image:  url("https://definicao.net/wp-content/uploads/2018/10/significado-de-background-810x506.jpeg");
   background-size: auto;
   color: white;
}

.background-screen *{
  position: relative;
}

.background-screen::before{
   content: '';
   background-image: url("https://images.pexels.com/photos/949587/pexels-photo-949587.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500");
   background-size: auto;
   position: absolute;
   width: 100%;
   height: 100%;
   top: 0;
   left: 0;
   opacity: 0.6;
}
<div class="background-screen">
  <p>Hello</p>
  <p>Hello</p>
  <p>Hello</p>
  <p>Hello</p>
  <p>Hello</p>
</div>

Browser other questions tagged css

You are not signed in. Login or sign up in order to post.