0

I've spent the past 60 minutes looking for a property that does to the image tag what "background-attachement: fixed" does to a background image.

I know for a fact this property exists, I used it once 6 months ago. I found out about it when I found out about "object-fit: cover" for the image tag.

I've no idea how to further describe it. I'm hoping that someone in here knows what I'm talking about.

Here's a video explanation: https://www.loom.com/share/b5f7652d60994d9392c7fa00dc8b260e

alexlazar97
  • 9
  • 1
  • [object-position property MDN WebDocs](https://developer.mozilla.org/en-US/docs/Web/CSS/object-position) – tacoshy Oct 28 '21 at 15:44
  • So you want a fixed image that stays there when you scroll? – Matthias Oct 28 '21 at 15:45
  • @tacoshy nope, that's not it – alexlazar97 Oct 28 '21 at 17:45
  • @Matthias I want the same effect that "background-attachement: fixed;" does to a background image, but I want to use it on the image tag instead of using it on a div that has a background image. I'm honestly starting to think I'm crazy and the property that I'm looking for doesn't even exist at this point – alexlazar97 Oct 28 '21 at 17:45
  • If you have no idea what I'm yapping about, here's a video explanation: https://www.loom.com/share/b5f7652d60994d9392c7fa00dc8b260e – alexlazar97 Oct 28 '21 at 18:00
  • Maybe position:fixed + clip-path: https://stackoverflow.com/a/68466386/2418224 – juzraai Oct 28 '21 at 18:07
  • @juzraai that achieves the effect, yes. But then again, so does "background-attachement: fixed;". I'm still willing to bet there is one obscure, new property that does the effect in just one line. And, at this point, I'm just being stubborn about finding it tbh. – alexlazar97 Oct 28 '21 at 18:23
  • Maybe you had this in mind [Background-attachment:fixed equivalent for IMGs](https://stackoverflow.com/questions/46896868/background-attachmentfixed-equivalent-for-imgs) – t.niese Oct 28 '21 at 18:54
  • Or `position: sticky` I know that apple uses `position: sticky` to achieve similar effects on their website. But `sticky` only works for that purpose only on very limited use-cases. – t.niese Oct 28 '21 at 19:00

1 Answers1

0

At this point, finding that property (that may not even exist and I'm wrong about it) is a time sink. So, I'm giving up and wrapping this up.

There are 2 options to achieve the effect.

  1. Use a background-image on a div tag with "background-attachement:fixed" like I did in this loom video https://www.loom.com/share/b5f7652d60994d9392c7fa00dc8b260e

  2. Use the clip-path trick mentioned in this other question How to use CSS background-attachment in <img> tag?

I personally will go for #1, because it is cleaner to implement in my Tailwind + Next.js codebase.

But #2 works just as well and it allows you to use the image tag. Using the image tag has the benefits of easy lazy-loading and slightly better SEO.

alexlazar97
  • 9
  • 1