# background-image

The markup of every demo on <https://kuiper.oeds.it/background-image/>, extracted from that
page. It is generated, so it cannot disagree with what the page renders.

Load the framework from the origin and read <https://kuiper.oeds.it/docs/KUIPER.md> first:
a Kuiper class carries no prefix and a UIkit behavior attribute carries `data-`.

## size

One specimen per size rung, so the ladder reads as a single column. A rung sets the height, the type size and the horizontal padding together, and the sizeless specimen is identical to `-m` by construction.

Varies: 4 specimens.

```html
<div class="grid-xs" data-grid>
 <div class="width-1-1 width-1-2@s width-1-2@m width-1-4@l width-1-4@xl"><div class="card"><canvas class="canvas canvas-1-1 background-cover" data-src="/images/thumbnail-1.jpg" data-img></canvas><p class="text-truncate text-center text-xs">background-cover</p></div></div>
 <div class="width-1-1 width-1-2@s width-1-2@m width-1-4@l width-1-4@xl"><div class="card"><canvas class="canvas canvas-1-1 background-contain" data-src="/images/thumbnail-1.jpg" data-img></canvas><p class="text-truncate text-center text-xs">background-contain</p></div></div>
 <div class="width-1-1 width-1-2@s width-1-2@m width-1-4@l width-1-4@xl"><div class="card"><canvas class="canvas canvas-1-1 background-width-1-1" data-src="/images/thumbnail-1.jpg" data-img></canvas><p class="text-truncate text-center text-xs">background-width-1-1</p></div></div>
 <div class="width-1-1 width-1-2@s width-1-2@m width-1-4@l width-1-4@xl"><div class="card"><canvas class="canvas canvas-1-1 background-height-1-1" data-src="/images/thumbnail-1.jpg" data-img></canvas><p class="text-truncate text-center text-xs">background-height-1-1</p></div></div>
</div>
```

## size

Varies: 4 specimens.

```html
<div class="grid-xs" data-grid>
 <div class="width-1-1 width-1-2@s width-1-2@m width-1-4@l width-1-4@xl"><div class="card"><canvas class="canvas canvas-3-1 background-cover" data-src="/images/thumbnail-1.jpg" data-img></canvas><p class="text-truncate text-center text-xs">background-cover</p></div></div>
 <div class="width-1-1 width-1-2@s width-1-2@m width-1-4@l width-1-4@xl"><div class="card"><canvas class="canvas canvas-3-1 background-contain" data-src="/images/thumbnail-1.jpg" data-img></canvas><p class="text-truncate text-center text-xs">background-contain</p></div></div>
 <div class="width-1-1 width-1-2@s width-1-2@m width-1-4@l width-1-4@xl"><div class="card"><canvas class="canvas canvas-3-1 background-width-1-1" data-src="/images/thumbnail-1.jpg" data-img></canvas><p class="text-truncate text-center text-xs">background-width-1-1</p></div></div>
 <div class="width-1-1 width-1-2@s width-1-2@m width-1-4@l width-1-4@xl"><div class="card"><canvas class="canvas canvas-3-1 background-height-1-1" data-src="/images/thumbnail-1.jpg" data-img></canvas><p class="text-truncate text-center text-xs">background-height-1-1</p></div></div>
</div>
```

## position

Varies: 9 specimens.

```html
<div class="grid-xs" data-grid>
 <div class="width-1-3 width-1-3@s width-1-3@m width-1-3@l width-1-3@xl"><div class="card"><canvas class="canvas canvas-1-1 background-norepeat background-top-left" data-src="/images/thumbnail-1.jpg" data-img></canvas><p class="text-truncate text-center text-xs">background-top-left</p></div></div>
 <div class="width-1-3 width-1-3@s width-1-3@m width-1-3@l width-1-3@xl"><div class="card"><canvas class="canvas canvas-1-1 background-norepeat background-top-center" data-src="/images/thumbnail-1.jpg" data-img></canvas><p class="text-truncate text-center text-xs">background-top-center</p></div></div>
 <div class="width-1-3 width-1-3@s width-1-3@m width-1-3@l width-1-3@xl"><div class="card"><canvas class="canvas canvas-1-1 background-norepeat background-top-right" data-src="/images/thumbnail-1.jpg" data-img></canvas><p class="text-truncate text-center text-xs">background-top-right</p></div></div>
 <div class="width-1-3 width-1-3@s width-1-3@m width-1-3@l width-1-3@xl"><div class="card"><canvas class="canvas canvas-1-1 background-norepeat background-center-left" data-src="/images/thumbnail-1.jpg" data-img></canvas><p class="text-truncate text-center text-xs">background-center-left</p></div></div>
 <div class="width-1-3 width-1-3@s width-1-3@m width-1-3@l width-1-3@xl"><div class="card"><canvas class="canvas canvas-1-1 background-norepeat background-center-center" data-src="/images/thumbnail-1.jpg" data-img></canvas><p class="text-truncate text-center text-xs">background-center-center</p></div></div>
 <div class="width-1-3 width-1-3@s width-1-3@m width-1-3@l width-1-3@xl"><div class="card"><canvas class="canvas canvas-1-1 background-norepeat background-center-right" data-src="/images/thumbnail-1.jpg" data-img></canvas><p class="text-truncate text-center text-xs">background-center-right</p></div></div>
 <div class="width-1-3 width-1-3@s width-1-3@m width-1-3@l width-1-3@xl"><div class="card"><canvas class="canvas canvas-1-1 background-norepeat background-bottom-left" data-src="/images/thumbnail-1.jpg" data-img></canvas><p class="text-truncate text-center text-xs">background-bottom-left</p></div></div>
 <div class="width-1-3 width-1-3@s width-1-3@m width-1-3@l width-1-3@xl"><div class="card"><canvas class="canvas canvas-1-1 background-norepeat background-bottom-center" data-src="/images/thumbnail-1.jpg" data-img></canvas><p class="text-truncate text-center text-xs">background-bottom-center</p></div></div>
 <div class="width-1-3 width-1-3@s width-1-3@m width-1-3@l width-1-3@xl"><div class="card"><canvas class="canvas canvas-1-1 background-norepeat background-bottom-right" data-src="/images/thumbnail-1.jpg" data-img></canvas><p class="text-truncate text-center text-xs">background-bottom-right</p></div></div>
</div>
```

## repeat

Varies: 2 specimens.

```html
<div class="grid-xs" data-grid>
 <div class="width-1-1 width-1-2@s width-1-2@m width-1-2@l width-1-2@xl"><div class="card"><canvas class="canvas canvas-3-1" data-src="/images/thumbnail-1.jpg" data-img></canvas><p class="text-truncate text-center text-xs">default</p></div></div>
 <div class="width-1-1 width-1-2@s width-1-2@m width-1-2@l width-1-2@xl"><div class="card"><canvas class="canvas canvas-3-1 background-norepeat" data-src="/images/thumbnail-1.jpg" data-img></canvas><p class="text-truncate text-center text-xs">background-norepeat</p></div></div>
</div>
```

## attachment

Varies: 2 specimens.

```html
<div class="grid-xs" data-grid>
 <div class="width-1-1 width-1-2@s width-1-2@m width-1-2@l width-1-2@xl"><div class="card"><canvas class="canvas canvas-1-1 background-cover" data-src="/images/thumbnail-1.jpg" data-img></canvas><p class="text-truncate text-center text-xs">default</p></div></div>
 <div class="width-1-1 width-1-2@s width-1-2@m width-1-2@l width-1-2@xl"><div class="card"><canvas class="canvas canvas-1-1 background-cover background-fixed" data-src="/images/thumbnail-1.jpg" data-img></canvas><p class="text-truncate text-center text-xs">background-fixed</p></div></div>
</div>
```

## responsive

Varies: 4 specimens.

```html
<div class="grid-xs" data-grid>
 <div class="width-1-2 width-1-2@s width-1-4@m width-1-4@l width-1-4@xl"><div class="card"><canvas class="canvas canvas-3-2 background-muted background-cover background-image@s" data-src="/images/thumbnail-1.jpg" data-img></canvas><p class="text-truncate text-center text-xs">background-image@s</p></div></div>
 <div class="width-1-2 width-1-2@s width-1-4@m width-1-4@l width-1-4@xl"><div class="card"><canvas class="canvas canvas-3-2 background-muted background-cover background-image@m" data-src="/images/thumbnail-1.jpg" data-img></canvas><p class="text-truncate text-center text-xs">background-image@m</p></div></div>
 <div class="width-1-2 width-1-2@s width-1-4@m width-1-4@l width-1-4@xl"><div class="card"><canvas class="canvas canvas-3-2 background-muted background-cover background-image@l" data-src="/images/thumbnail-1.jpg" data-img></canvas><p class="text-truncate text-center text-xs">background-image@l</p></div></div>
 <div class="width-1-2 width-1-2@s width-1-4@m width-1-4@l width-1-4@xl"><div class="card"><canvas class="canvas canvas-3-2 background-muted background-cover background-image@xl" data-src="/images/thumbnail-1.jpg" data-img></canvas><p class="text-truncate text-center text-xs">background-image@xl</p></div></div>
</div>
```