Stats preview card component with HTML and CSS

Community feedback

• 

  Vanza Setia•27,775

  @vanzasetiaPosted over 3 years ago

  👋Hi Javi Rodriguez! My name is Vanza!

  I have a solution for the image problem and this was also what I did when trying to complete this challenge:

  • I recommend to create an empty div inside the article
  • Then try to use these properties on the div:

  article div {
    background: url('./images/image-header-mobile.jpg') no-repeat center center;
    background-color: var(--soft-violet);
    background-blend-mode: multiply;
    background-size: cover;
    height: 13.125rem; // => 210px / 16
  }
  

  That's it! Hopefully this is helpful!

  Marked as helpful

  0

  ---

  

  Javi Rodriguez•10

  @JaviRdrgzPosted over 3 years ago

  @vanzasetia Hi Vanza! thank you for replying. Your solution looks very similar to mine, did you use an <img> tag in the HTML or just the div with the background?

  0

  

  Vanza Setia•27,775

  @vanzasetiaPosted over 3 years ago

  @JaviRdrgz Sorry, the code that I wrote above, was not exactly what I did when I created this solution as far as the HTML. I was seeing your code and then I gave a solution for you, based on your code.

  So, I used section tag, but you can use div, then give it a background-image on CSS.

  If you're confused on how to do it, you can check my solution on this challenge or you can just ask me right here.

  That's it! Hopefully this answer your question!

  0
• 

  Akash Verma•810

  @akash-1712Posted over 3 years ago

  Give min-height:20rem to picture and add some Margin-top:10rem in article for mobile Layout.

  To turn the image purple make a (div.image) give background-color:purple and then put image inside it with property=>{opacity:0.3}.

  Marked as helpful

  0

  ---

  

  Javi Rodriguez•10

  @JaviRdrgzPosted over 3 years ago

  @akash-1712 Oh I get it, so the solution would be to give the <img> tag a default height so that it is the biggest element in the component. Thank you for your feedback Akash!

  0