Thanks for this write up. I found it really inspiring.
I ended having a go at some grid hero images as well and found that the background image can be just a default display: block element with the image set to backgound-size: cover, the tint/overlay can be the grid container.
I ended doing it two ways, one with a 12x12 grid like the one you've outlined in this article, and one just using justify/align-items, which is a bit simpler but still very versatile. Anyway if you fancied a look here's what I came up with: michaelodonovan.net/Words/HeroImag...
Grid is awesome and I've gone all in this year, don't even use flex anymore - grid can do everything flex can, and a lot lot lot more : )
Nice article and glad you like this approach. It seems like there’s still great reasons to use flex, but yes I agree Grids are much easier to work with.
The specific reasons I don’t like background images is it is hard to make them dynamic. For example, take a blog post. Most blog posts have a unique image in them. You want to add those images to the markup (HTML), not the CSS. Also, if you are coding dynamic sites, background images contained within the CSS feels clunky.
I’m not against the use of a background image, but it feels like you get a lot more flexibility with a standard image.
Thanks again!
For further actions, you may consider blocking this person and/or reporting abuse
We're a place where coders share, stay up-to-date and grow their careers.
Thanks for this write up. I found it really inspiring.
I ended having a go at some grid hero images as well and found that the background image can be just a default display: block element with the image set to backgound-size: cover, the tint/overlay can be the grid container.
I ended doing it two ways, one with a 12x12 grid like the one you've outlined in this article, and one just using justify/align-items, which is a bit simpler but still very versatile. Anyway if you fancied a look here's what I came up with:
michaelodonovan.net/Words/HeroImag...
Grid is awesome and I've gone all in this year, don't even use flex anymore - grid can do everything flex can, and a lot lot lot more : )
Nice article and glad you like this approach. It seems like there’s still great reasons to use flex, but yes I agree Grids are much easier to work with.
The specific reasons I don’t like background images is it is hard to make them dynamic. For example, take a blog post. Most blog posts have a unique image in them. You want to add those images to the markup (HTML), not the CSS. Also, if you are coding dynamic sites, background images contained within the CSS feels clunky.
I’m not against the use of a background image, but it feels like you get a lot more flexibility with a standard image.
Thanks again!