Stats Website using Html and CSS

Community feedback

• 

  Ayoub1Dev•195

  @Ayoub1devPosted over 3 years ago

  You can also do that by setting another div* to position: absolute; over the image.

  *The div should have a transparency value like rgba()

  1

  ---

  

  Aaryan Nayyar•60

  @ArreyawnPosted over 3 years ago

  @Ayoub1dev Hey I actually tried this method but it kinda creates more problems than it solves. I'll give it a try in one of the future projects for sure. Thanks for the time ;)

  0

  

  Ayoub1Dev•195

  @Ayoub1devPosted over 3 years ago

  @Arreyawn It's a really useful method of used in the right place. But, as you said in this project it creates more problems.

  An example of where it will work is when clicking the menu button, a sidebar is displayed and a black overlay is displayed.

  What about the 1st method, did you try it. I have posted my solution if you would like to have a look at my code.

  1

  

  Aaryan Nayyar•60

  @ArreyawnPosted over 3 years ago

  @Ayoub1dev Hey I just checked out your solution and it's different than what I see usually for overlays. Thanks for the suggestion!

  0

  

  Ayoub1Dev•195

  @Ayoub1devPosted over 3 years ago

  @Arreyawn No problem. We are here to Help 🆘 😊

  0
• 

  Ayoub1Dev•195

  @Ayoub1devPosted over 3 years ago

  I didn' check your code but I think I can help you.

  Hope this helps :)

  1. To display the overlay you just need <div class="img"></div> without an img tag.

  2. In CSS you set the width and height of the container

  3. You have to set the background property (NOT background-image) to the url() of the image and following the url specify the color, like this: background: url(/images/image-header-desktop.jpg), rgb(91, 46, 119);

  4. Here the intersting part. There is a property in css called background-blend-mode, it contains many values but we are intersted in the overlay value, like this : background-blend-mode: overlay;

  HTML

  <div class="img"></div>
  

  CSS

  .img {
      width: 460px;
      background: url(/images/image-header-desktop.jpg), rgb(91, 46, 119);
      background-blend-mode: overlay;
      background-repeat: no-repeat;
      background-size: 100%;
  }
  

  1
• 

  Carlos Guzman•285

  @guztrilloPosted over 3 years ago

  Hey Aaryan. You could try using mix-blend-mode property. Search about it.

  0

  ---

  

  Aaryan Nayyar•60

  @ArreyawnPosted over 3 years ago

  @guztrillo Hey Carlos, I researched about it. Thanks for the suggestion

  0