Quick note: I am an occasional developer, so if I did something wrong, please be gentle :-). Okay on with the article...
Recently I decided to bui...
For further actions, you may consider blocking this person and/or reporting abuse
Nice touch on the typography! It makes a huge difference in readability. Try using VH instead of pixels for the height of the banner, this way it’s always proportional to the users viewing area. Also, use a child combinator to avoid writing so many class names. You can target the children of your Div like this:
.banner-text-div > h1 {
Styles: here;
}
.banner-text-div > p {
Styles: here;
}
developer.mozilla.org/en-US/docs/W...
Thanks for sure VH idea! I will play with implementing that on the project I start today, so it’s a timely idea. Yes, I have a tendency to do that with CSS so thank you for the reminder :)
Thank you for sharing your experience. For everyone who is interested in the topic of heroes, I recommend the article gapsystudio.com/blog/hero-image-we.... This article explains how to place heroes on home pages and website banners, and outlines methods for hero performance for your brand.
That is a great article, thank you!
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!