Stats preview card

Community feedback

• 

  👾 Ekaterine Mitagvaria 👾•7,600

  @catherineisonlinePosted almost 2 years ago

  For the image, I did something like this, I hope that helps:

              <div class="image-container">
                  <img class="main-image" src="images/image-header-mobile.jpg" alt="">
              </div>
  
  .image-container {
    display: inherit;
    position: relative;
    width: 100%;
    border-radius: 0 10px 10px 0;
    background-color: hsl(277, 64%, 61%);
  }
  .main-image {
    width: 100%;
    height: 100%;
    position: relative;
    background-size: cover;
    border-radius: 0 10px 10px 0;
    mix-blend-mode: multiply;
    opacity: 0.75;
  }
  

  Marked as helpful

  0
• 

  Sinisa Vukmirovic•1,690

  @SinisaVukmirovicPosted almost 2 years ago

  Hello!

  About your question regarding the way to put image on a site.

  There is no "best/better" way to do it. Both ways are good and needed.

  Guidelines for putting images on site, are:

  • when picture is related to the site's content it should be put with <img> tag in HTML (for example, if your site is about furniture, and the picture is of furniture, it should be put with <img> tag through HTML)
  • when picture in non-related to the site's content, it could be put as background-image through CSS (for example, some random graphics, pattern..., used just for visuals and design of site)

  Hope this helps!

  Marked as helpful

  0

  ---

  

  Dorian•140

  @dkirincPosted almost 2 years ago

  @SinisaVukmirovic

  Thank you Siniša. This guidelines will be really helpful in the future.

  Cheers

  0
• 

  Adriano•38,060

  @AdrianoEscarabotePosted almost 2 years ago

  Hello Dorian, how are you? I truly loved your project's outcome, however I have some advice that I hope you'll find useful:

  To get closer to the photo overlay effect, you'd better use mix-blend-mode. All you need is the div under the image with this background color: hsl(277, 64%, 61%); and position mix-blend-mode: multiply and opacity: 80% on the image or apply image to activate the overlay by blending the image with the div's color. See the code below:

  img {
      mix-blend mode: multiply;
      opacity: 80%;
  }
  

  You can read this content which is explaining these effects with mix-blend-mode: click here

  I noticed that the content is breaking between 810px and 600px, prefer to call your media query a little earlier to avoid this!

  The remainder is excellent.

  I hope it's useful. 👍

  Marked as helpful

  0

  ---

  

  Dorian•140

  @dkirincPosted almost 2 years ago

  @AdrianoEscarabote

  Thanks for the comment, i will try your solution to see how it works.

  Cheers

  1