Stats Preview Card

Community feedback

• 

  JJ Fuentes•140

  @jjfuentes13Posted almost 2 years ago

  Hi Benjamin, try using the property background-blend-mode,

  https://developer.mozilla.org/en-US/docs/Web/CSS/background-blend-mode.

  https://developer.mozilla.org/en-US/docs/Web/CSS/blend-mode

  https://developer.mozilla.org/en-US/docs/Web/CSS/mix-blend-mode

  I used soft light for the value, and it was the closest I got to be satisfied with a replication of the purple hue of the image. I wanted to make the darks darker without making the whole image dark, as you will probably see when using hard light value. I would think there are additional tips and best practices to improve color saturation, but at least using background-blend-mode achieved getting the image purple to specifications.

  Marked as helpful

  1

  ---

  

  Benjamin•70

  @BenMK94Posted almost 2 years ago

  @jjfuentes13 Thanks! I'll give that a try.

  0

  

  yishak abrham•2,150

  @yishak621Posted almost 2 years ago

  @BenMK94 the 6th way 😀

  1
• 

  Hassia Issah•50,670

  @HassiaiPosted almost 2 years ago

  Replace <div class="wrapper"> with the main tag to fix the accessibility issue.

  To center .wrapper on the page, add min-height:100vh; display: flex; align-items: center: justify-content: center; or min-height:100vh; display: grid place-items: center to the body.

  for the color over the image, wrap the img tag in a div and give it a class for the styling. e.g <div class=" sftviolet"><img class="splash-image"></div> in the CSS give .sftviolet a background-color of soft violet and display: block. Give .splash-image width of100%, mix-blend-mode: multiply and opacity: 0.8 or 0.7 you can try this out.

  Hope am helpful.

  Well done for completing this challenge. HAPPY CODING

  1