Skip to content
Submitted almost 2 years ago

NFT Preview Card Component

Aima Aimaduddin bin Bollhasan•100
@aimaduddin
Preview site (opens in new tab)View code (opens in new tab)
This is a solution for...NFT preview card component
  • HTML
  • CSS
1newbie

Design comparison

SolutionDesign

Solution retrospective

Hi, I have a question.

May I know why I could not add the SVG icon using the background-image property inside ::after pseudo-element? It only can be loaded when I put the image inside the content property. You can check my code at line 181. Any thoughts?

Community feedback

  • Dana Hong•340
    @Dana-HongPosted almost 2 years ago

    Hi Aima,

    Good work with this solution. If you want to put the image in a pseduo-element as a background image, you have to set the parent of the pseudo-element to position: relative;, and the pseudo-element to position: absolute;. However, you would then need to turn off the repeating background images with background-repeat: no-repeat;, then add padding to the parent and adjust the positioning on the pseudo-element.

    Another solution would be to use an <img> tag, since these are inline by default.

    Hope this helps!

    Marked as helpful
    1
    Aima Aimaduddin bin Bollhasan•100
    @aimaduddinPosted almost 2 years ago

    @Dana-Hong Thank you for the explanation, Dana. 😀

    0

Please log in to post a comment

Log in with GitHub

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