Responsive Hero Using CSS Grid (Base apparel Coming Soon)

Community feedback

• 

  Elaine•11,400

  @elaineleungPosted about 2 years ago

  Hey DarkDev56, glad you found a workaround! In the first version of this challenge I believe I also used a background image, but eventually I switched to using an img. I think in most cases it's preferable to use an img for the hero image instead of a background-image div, and it's also easier to work with since an img is already content itself, whereas a background-image div is an empty div and needs to have width and height set on it. Using an img is for accessibility reasons too; screen readers can read out the description of the image, whereas there aren't alt tags on a background-image div. For a site like this that sells a product, it's an especially good idea to be a descriptive as possible.

  Anyway, great job here still, and keep going! 😊

  Marked as helpful

  1

  ---

  

  DarkDev56•330

  @dotfivesixPosted about 2 years ago

  @elaineleung Thanks for appreciating my project. I know that <img> works well and is the best but I wanted to change src of img without using javascript. srcset or src property isn't supported much in CSS by different browsers so I used this technique. Thanks for your feedback, I always try to use <img> whenever possible.

  0

  

  Elaine•11,400

  @elaineleungPosted about 2 years ago

  @DarkDev56 No worries! Actually according to caniuse.com, srcset has a 97% usage, which is higher than grip gap; the only places it's not really supported is just IE (which doesn't support most things) and Opera mini, as well as some really old browsers, but that's still a really high usage percentage compared to many properties. Also, I don't think you'd need Javascript at all for changing the image size unless someone really choose to do that, but CSS handles it all!

  0