Displaying a caption on top of a side/split background image? (![bg left/right])

[sbibauw]

I am a big fan of the ![bg left/right]() image positioning, using it all the time, for cover slides, outline slides, section slides, and all the time for illustration purposes.
Many times, I'm using Unsplash images for cover/section illustration and I'd like to add a proper copyright mention clearly on the image.

Is there a way (in CSS) to make a text appear on top of these lateral background images?
Something like this:

I've tried with absolute positioning in CSS, using Tailwind (v2) (<div class="absolute left-10 bottom-10...">Caption</div>), with no luck however (it always appears within the text section next to the image).

[yhatt]

Check out #49. TL;DR: Use section::before pseudo-element.

![bg left](https://picsum.photos/720?image=29)

<style scoped>
section::before {
  content: 'Text Overlay Example';
  position: absolute;
  bottom: 30px;
  left: 30px;
  font-size: 20px;
  background: rgb(0 0 0 / 0.8);
  color: white;
  border-radius: 4px;
  padding: 4px 10px;
}
</style>