I used to be engaged on a consumer undertaking a number of days in the past and wished to create a sure impact on an <img>. See, background pictures can do the impact I used to be in search of considerably simply with background-attachment: mounted;. With that in place, a background picture stays in place—even when the web page scrolls. It isn’t used all that usually, so the impact can look uncommon and hanging, particularly when used sparingly.
It took me a while to determine learn how to obtain the identical impact solely with an inline picture, quite than a CSS background picture. It is a video of the impact in motion:
The precise code for the above demo is out there on this Git repo. Simply observe that it’s a Subsequent.js undertaking. We’ll get to a CodePen instance with uncooked HTML in a bit.
Why use <img> as an alternative of background-image?
The are quite a few causes I wished this for my undertaking:
It’s simpler to lazy load (e.g. <img loading=”lazy”… >.It supplies higher search engine marketing (to not point out accessibility), due to alt textual content.It’s doable to use srcset/sizes to enhance the loading efficiency.It’s doable to use the <image> tag to select one of the best picture dimension and format for the person’s browser.It permits customers to obtain save the picture (with out resorting to DevTools).
General, it’s higher to make use of the picture tag the place you possibly can, notably if the picture may very well be thought-about content material and never ornament. So, I wound up touchdown on a way that makes use of CSS clip-path. We’ll get to that in a second, proper after we first have a look at the background-image technique for a pleasant side-by-side comparability of each approaches.
1. Utilizing CSS background-image
That is the “unique” option to pull off a hard and fast scrolling impact. Right here’s the CSS:
.hero-section {
background-image: url(“nice_bg_image.jpg”);
background-repeat: no-repeat;
background-size: cowl;
background-position: middle;
background-attachment: mounted;
}
However as we simply noticed, this method isn’t perfect for some conditions as a result of it depends on the CSS background-image property to name and cargo the picture. Which means the picture is technically not thought-about content material—and thus unrecognized by display screen readers. If we’re working with a picture that’s a part of the content material, then we actually should make it accessible so it’s consumed like content material quite than ornament.
In any other case, this system works nicely, however solely if the picture spans the entire width of the viewport and/or is centered. In case you have a picture on the suitable or left facet of the web page like the instance, you’ll run into an entire variety of positioning points as a result of background-position is relative to the middle of the viewport.
Fixing it requires a number of media queries to verify it’s positioned correctly on all gadgets.
2. Utilizing the clip-path trick on an inline picture
Somebody on StackOverflow shared this clip-path trick and it will get the job accomplished nicely. You additionally get to maintain utilizing the<img> tag, which, as we lined above, is perhaps advantageous in some circumstances, particularly the place a picture is a part of the content material quite than pure ornament.
Right here’s the trick:
.image-container {
place: relative;
top: 200px;
clip-path: inset(0);
}
.picture {
object-fit: cowl;
place: mounted;
left: 0;
high: 0;
width: 100%;
top: 100%;
}
Test it out in motion:
Now, earlier than we rush out and plaster this snippet in all places, it has its personal set of downsides. For instance, the code feels a bit prolonged to me for such a easy impact. However, much more necessary is the truth that working with clip-path comes with some implications as nicely. For one, I can’t simply slap a border-radius: 10px; in there like I did within the earlier instance to around the picture’s corners. That received’t work—it requires making rounded corners from the clipping path itself.
One other instance: I don’t know learn how to place the picture inside the clip-path. Once more, this is perhaps a matter of realizing clip-path very well and drawing it the place it’s good to, or cropping the picture itself forward of time as wanted.
Is there one thing higher?
Personally, I gave up on utilizing the mounted scrolling impact on inline pictures and am again to utilizing a CSS background picture—which I do know is sort of limiting.
Have you ever ever tried pulling this off, notably with an inline picture, and managed it nicely? I’d love to listen to!
The Search For a Fastened Background Impact With Inline Pictures initially printed on CSS-Methods. You need to get the e-newsletter and turn out to be a supporter.
Subscribe to MarketingSolution.
Receive web development discounts & web design tutorials.
Now! Lets GROW Together!