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

Mobile First, BEM, CSS Transitions and IIFE JavaScript function

Orses 210

@orses

Desktop design screenshot for the Article preview component coding challenge

This is a solution for...

  • HTML
  • CSS
  • JS
1newbie
View challenge

Design comparison


SolutionDesign

Solution retrospective


Is it better for a card component to have the image as the background of a div or directly from img? In HTML is it better to use the <svg> tag to insert SVG images or pass them to the img tag? Thank you very much for the comments and suggestions. They are appreciated.

Community feedback

Lucas 👾 104,440

@correlucas

Posted

👾 Hello Orses, congratulations for your solution!

I think is semantically better you insert the img inside the html for SEO purposes, I don't think is a good practice to insert some importante image as background-image into the CSS.

I've done a research after I saw your question and I found this in stackoverflow answering the same question:

"Is it better to define images in direct html or css?"

https://stackoverflow.com/questions/7678883/is-it-better-to-define-images-in-direct-html-or-css#:~:text=Using%20images%20in%20HTML%20is,presentation%2C%20HTML%20is%20for%20content.

If you have the svg image is better you use it inside the svg tag than the image, this way you declare to the search mechanism with more specificity.

Hope it helps you! Happy coding.

Marked as helpful

1

Orses 210

@orses

Posted

Thank you very much for your comments @correlucas and for the link to stackoverflow. I always have that doubt with the images, but the precision that you make, what @DavidMorgade commented and what is read in stackoverflow has helped me to clarify myself. Thank you very much for your answer.

1
Lucas 👾 104,440

@correlucas

Posted

@orses You're welcome, I had the some doubt until I saw your question and wen to search it hahaha, thank you!

1
David 8,000

@DavidMorgade

Posted

Hi, normally you use CSS background image when you need a background image, in this case for example, is better to just use an html img since its not a background, is part of the card.

For the SVG, the most common case are just using an img tag, and putting the svg file path in the src attribute of your img tag.

Hope this answers helps you!, if you have any more questions feel free to ask.

Marked as helpful

1

Orses 210

@orses

Posted

@DavidMorgade Thank you very much. Your answers seemed very precise and clear. They have helped me alot. Cheers

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