0

I'm experimenting (on current MacOS Firfox) with this retro effect on images, but I'm running into a problem with background colors and z-index: -1.

Here's a stripped down example:

.retro {
  -webkit-box-shadow: inset 0px 0px 100px rgba(0, 0, 20, 1);
  background: -webkit-linear-gradient(top, rgba(255, 145, 0, 0.2) 0%, rgba(255, 230, 48, 0.2) 60%), -webkit-linear-gradient(20deg, rgba(255, 0, 0, 0.5) 0%, rgba(255, 0, 0, 0) 35%);
  display: table;
}

.retro img {
  filter: sepia(20%) brightness(90%) contrast(130%);
  position: relative;
  z-index: -1;
  width: 100%;
}

.background {
  background-color: blue;
}
<html>
  <body>
    <section class="background">
      <picture class="retro">
        <img src="https://cdn2.wanderlust.co.uk/media/1028/cropped-shutterstock_497799013.jpg" />
      </picture>
    </section>
  </body>
</html>

Apparently, the z-index: -1 stacks the img behind the section and not behind the picture (but in front of section).

This only happens when section has a background color assigned, once removed, things look the way they should:

.retro {
  -webkit-box-shadow: inset 0px 0px 100px rgba(0, 0, 20, 1);
  background: -webkit-linear-gradient(top, rgba(255, 145, 0, 0.2) 0%, rgba(255, 230, 48, 0.2) 60%), -webkit-linear-gradient(20deg, rgba(255, 0, 0, 0.5) 0%, rgba(255, 0, 0, 0) 35%);
  display: table;
}

.retro img {
  filter: sepia(20%) brightness(90%) contrast(130%);
  position: relative;
  z-index: -1;
  width: 100%;
}

.background {
  background-color: blue;
}
<html>
  <body>
    <section>
      <picture class="retro">
        <img src="https://cdn2.wanderlust.co.uk/media/1028/cropped-shutterstock_497799013.jpg" />
      </picture>
    </section>
  </body>
</html>

I've gone over the z-index basics with stacking context etc, but I don't see how any of this applies here.

Any ideas? Thanks a bunch!

UPDATE

It works if I force a new stacking context on section, but not when a new stacking context is forced on picture. Why is that?

And why does the z-index: -1 on img have any effect to begin with even though according to the MDN docs the presence of filter should force a new stacking context as well?

.retro {
  box-shadow: inset 0px 0px 100px rgba(0, 0, 20, 1);
  background: -webkit-linear-gradient(top, rgba(255, 145, 0, 0.2) 0%, rgba(255, 230, 48, 0.2) 60%), -webkit-linear-gradient(20deg, rgba(255, 0, 0, 0.5) 0%, rgba(255, 0, 0, 0) 35%);
  display: flex;
  width: 300px;
}

.retro img {
  filter: sepia(20%) brightness(90%) contrast(130%);
  z-index: -1;
  width: inherit;
}

.background {
  background-color: blue;
  position: relative;
  z-index: 0;
}
<html>
  <body>
    <section class="background">
      <picture class="retro">
        <img src="https://cdn2.wanderlust.co.uk/media/1028/cropped-shutterstock_497799013.jpg" />
      </picture>
    </section>
  </body>
</html>
svoop
  • 3,318
  • 1
  • 23
  • 41
  • Considering the [spec on the picture element](https://html.spec.whatwg.org/multipage/embedded-content.html#the-picture-element), I don't think it's surprising it doesn't work like other block elements (as far as stacking context is concerned) as it's only intended to provide a _context_ for the contained ``s, not as a container within the document flow. – chazsolo Dec 07 '20 at 14:54
  • 1
    the filter is applied to the image so it's irrelevant here to consider stacking context and there is no parent element creating a stacking context so image will be behind everything unless you force a parent to create a stacking context like you did in the last example – Temani Afif Dec 07 '20 at 15:21
  • @chazsolo same happens if you use div instead of picture – svoop Dec 07 '20 at 15:22
  • @TemaniAfif "the filter is applied to the image so it's irrelevant here to consider stacking context": do you mean filters applied to img never have an influence on stacking? – svoop Dec 07 '20 at 16:05
  • 1
    yes because an image will never contain any other elements to talk about stacking context. It's relevant when applied to a container in order to creating a stacking and make all chids trapped inside – Temani Afif Dec 07 '20 at 16:06
  • @TemaniAfif IC, so my misunderstanding of stacking context boils down to: When a new stacking context is established (e.g. with `position: relative; z-index: 0`, does this `z-index: 0` apply in the context of the parent, the new stacking context or both? – svoop Dec 07 '20 at 16:26
  • 1
    the z-index will create a stacking context BUT is used in another stacking context. We have two of the me, the one created by the main element for the child (z-index play no role here since the element creating the stacking is always at the bottom) AND the one where the main element is placed and that z-idnex value will be used to find its stacking order – Temani Afif Dec 07 '20 at 19:52

0 Answers0