Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found

Submitted

product-preview-card-component

@phaethon

Desktop design screenshot for the Product preview card component coding challenge

This is a solution for...

  • HTML
  • CSS
1newbie
View challenge

Design comparison


SolutionDesign

Solution retrospective


Pros and cons on using background-image instead of <img> tag?

Community feedback

Cosmo 590

@cosmoart

Posted

Hi! Eriks, It looks great!... Here are some pros and cons. If you want more complete information you can visit this stack overflow question

Pros:

  • You save an HTML tag.
  • It is much easier to handle from the CSS
  • You can put content on top of the image more easily than using <img>

Cons:

  • You cannot use the alt attribute.
  • Search engines and screen readers can not read them
  • Users will not be able to select the image

Marked as helpful

1

Please log in to post a comment

Log in with GitHub
Discord logo

Join our Discord community

Join thousands of Frontend Mentor community members taking the challenges, sharing resources, helping each other, and chatting about all things front-end!

Join our Discord