Stats Preview Card

Community feedback

• 

  hitmorecode•6,680

  @hitmorecodePosted about 1 year ago

  You can fix the overlay like this

  • You can use a pseudo class to create the overlay (see below)

  .second{
      width: 50%;
      height: 100%;
      position: relative; /* this is necessary to position the overlay using pseudo class */
  }
  
  ## add this to your css
  .second::before {
      content: "";
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background-color: hsla(277, 67%, 61%, .8); /* you can adjust the opacity using the alpha channel or add opacity separately  */
      mix-blend-mode: multiply; /* use this to merge the overlay with the image */
  }
  
  .img{
      width: 100%;
      height: 100%;
     background-image: url("./images/image-header-desktop.jpg");
     background-color: hsl(277, 64%, 61%);
     background-repeat: no-repeat;
     background-size: cover;
     border-top-right-radius: 15px;
      border-bottom-right-radius: 15px;
  }
  

  Marked as helpful

  0

  ---

  

  syyedmuhammadabdullah•180

  @syyedmuhammadabdullahPosted about 1 year ago

  thanks for the help works perfectly fine@hitmorecode

  0
• 

  YoungZV•260

  @YoungZVPosted about 1 year ago

  Congrats on your solution.

  I solve this problem by adding opacity: .5 to my img and the img container colour is soft violet.

  Hope you find this answer helpful

  Regards, YoungZeeZee

  1

  ---

  

  syyedmuhammadabdullah•180

  @syyedmuhammadabdullahPosted about 1 year ago

  thanks for the help@YoungZV

  0