Stats Preview Card using HTML and CSS

Community feedback

• 

  darryncodes•6,390

  @darryncodesPosted about 3 years ago

  Hi Sue,

  Another option and some feedback:

  • you could try adding a solid linear-gradient to a background image: background-image: linear-gradient(hsl(277, 64%, 61%), hsl(277, 64%, 61%) ), url(../your/image-filepath); rather than creating an overlay per se
  • explore background-blend-mode. multiply usually does the trick
  • also you could clear up your accessibility report if you add some alt-texts to your images, try changing <div class="main-box"> to <main class="main-box"> and <div class="attribution"> to <footer class="attribution">. Semantic html is really important.

  All the best!

  Marked as helpful

  0

  ---

  

  Sue Williams•110

  @Pixie-Code-CreatorPosted about 3 years ago

  @darryncodes - Great. Thanks for all your advice. Very gratefully received. Sue

  0
• 

  jenny•150

  @jenniekibiriPosted about 3 years ago

  Normally adding color over an image you use a color overlay, with a CSS property of position absolute.

  .image { background-image: url("../images/image-header-desktop.jpg"); background-repeat: no-repeat; background-size: cover; height: 400px; min-width: 50%; position: relative;

  } #color-overlay { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-color: hsl(277, 64%, 61%); opacity: 0.6;

  }

  0

  ---

  

  Sue Williams•110

  @Pixie-Code-CreatorPosted about 3 years ago

  @jenniekibiri - Thanks Jenny. That is really helpful and a lot simpler than the way I had done it. I will use that next time. Sue

  1