Images & smart fit

Background images are the reason most sliders look wrong on phones: a wide photo gets centered in a tall box and the person on the left disappears. Insigne fixes that at the source.

Backgrounds are real images

Mark any <img>, <picture> or <video> as the slide background with data-bg:

<div>
  <img data-bg src="team.jpg" alt="Our team at the office" data-focus="25% 40%">
  <h2>Content on top</h2>
</div>

You keep everything images give you: alt, srcset / sizes, <picture> art direction, loading, decoding, SEO. A slide can also be the image: <insigne-slider><img src=…><img src=…></insigne-slider>.

Focus point

data-focus="x% y%" (or left, center, right, top, bottom) is the spot that matters. The slider centers the crop on it and never lets it leave the frame. Ken Burns zooms around it.

Safe area

data-safe="left top width height" (percent of the image) is a rectangle that must stay entirely visible — a product, a face, a headline painted into the photo. With the default fit: "smart":

1. The image covers the slide like cover, positioned so the safe area is inside.
2. If the safe area cannot fit at cover scale, it zooms out just enough.
3. The uncovered space is filled with a blurred copy of the same image (backdrop: "blur"), a color (backdrop: "#111") or nothing ("none").

<style>
  .row { display: flex; gap: 14px; flex-wrap: wrap; align-items: flex-start; }
  .row > div { flex: 1 1 160px; }
  .row p { font: 13px/1.4 system-ui; color: #6b6860; margin: 8px 0 0; }
</style>
<div class="row">
  <div>
    <div data-insigne data-height="320" data-fit="cover" data-arrows="hidden" data-pagination="none">
      <div><img data-bg src="/img/subject.svg" alt=""></div>
    </div>
    <p>fit: cover (centered)</p>
  </div>
  <div>
    <div data-insigne data-height="320" data-arrows="hidden" data-pagination="none">
      <div><img data-bg src="/img/subject.svg" alt="" data-focus="20% 55%"></div>
    </div>
    <p>data-focus="20% 55%"</p>
  </div>
  <div>
    <div data-insigne data-height="320" data-arrows="hidden" data-pagination="none" style="max-width:200px">
      <div><img data-bg src="/img/subject.svg" alt="" data-safe="8 18 34 64"></div>
    </div>
    <p>data-safe="8 18 34 64"</p>
  </div>
  <div>
    <div data-insigne data-height="320" data-arrows="hidden" data-pagination="none" style="max-width:150px">
      <div><img data-bg src="/img/subject.svg" alt="" data-safe="0 0 60 100"></div>
    </div>
    <p>Safe area wider than the frame: zooms out, blurred fill</p>
  </div>
</div>

Loading preview…

Live previewEdit in playground →

The same placement is used by the WebGL transitions, so a shader never crops differently than the DOM.

Fit modes

fit	Behavior
smart (default)	Cover, but never cut the focus or the safe area.
cover	Classic cover, centered on the focus point.
contain	The whole image, with a backdrop around it.

Set it for the whole slider, per slide (data-fit on the slide) or per image.

Never crop at all

height="image" gives every slide the exact ratio of its own background. See responsive.

Art direction

<picture> works as a background: the browser chooses the source, smart fit places it.

<!-- <picture> works as a background: the browser picks the source, smart fit places it. -->
<insigne-slider pagination="none" arrows="hidden" loop="off">
  <div>
    <picture data-bg data-focus="50% 40%">
      <source media="(max-width: 600px)" srcset="https://picsum.photos/id/1011/800/1000">
      <img src="https://picsum.photos/id/1011/1800/1000" alt="Woman in a canoe on a lake">
    </picture>
  </div>
</insigne-slider>

Lazy loading

Use data-src / data-srcset (also on <source>). Images load when their slide is within preload slides of the active one (default 1 on each side). With lazy: false everything loads at once.

<img data-bg data-src="big.jpg" data-srcset="big-800.jpg 800w, big-1600.jpg 1600w" sizes="100vw" alt="">

Video backgrounds

<video data-bg src="loop.mp4" poster="loop.jpg"></video>

Videos are muted, looped, inline, and play only while their slide is active and visible. The poster is used for WebGL transitions.

Ken Burns

kenBurns: "zoom-out" | "zoom-in" | "pan-left" | "pan-right" | "pan-up" | "pan-down" | "diagonal" | "alternate", per slider or per slide with data-ken-burns. Tune with kenBurnsDuration and kenBurnsScale. Off under reduced motion.