HTML 5 css3

Community feedback

• 

  Vanza Setia•27,775

  @vanzasetiaPosted over 3 years ago

  👋Hi Chandra Shekhar Pawar!

  My recommendation to add the purple overlay is by using background-blend-mode. So, I will guide you.

  1. HTML

  <div class="parent"></div>
  

  2. CSS, you need to add height in order for the image to show up.

  .parent {
    height: 22rem;
    background-image: url('path/to/image.jpg');
    background-repeat: no-repeat;
    background-color: hsl(244, 38%, 16%);
    background-blend-mode: multiply;
  }
  

  That's it! Hopefully this is helpful!

  Marked as helpful

  0

  ---

  

  Chandra Shekhar Pawar•110

  @Shekharpawar1Posted over 3 years ago

  @vanzasetia thanks

  0
• 

  dannebrob•130

  @dannebrobPosted over 3 years ago

  Have you tried to put the image in another div with a solid background color and change the opacity of the img?

  Marked as helpful

  0

  ---

  

  Chandra Shekhar Pawar•110

  @Shekharpawar1Posted over 3 years ago

  @dannebrob thanks it worked

  0

  

  dannebrob•130

  @dannebrobPosted over 3 years ago

  @Shekharpawar1 I'm glad it helped!

  0