` that loads a very large masthead `background-image`:
```html
```
The key here is the `lazy-bg` class, which is a class yall.js looks for (and can be changed in the options). When yall.js sees elements with this class, it will remove that class and replace it with a class of `lazy-bg-loaded` (also changeable in the options). From here, it's up to you to author CSS that makes use of this class to swap the image in. Such CSS might look like this:
```css
/* Pre-lazy loading styles */
.masthead {
background: #e6e6e6; /* A little placeholder color */
height: 16.66vw;
margin: 0 0 1rem;
}
/* BAM! Lazy loaded! */
.masthead.lazy-bg-loaded {
background: url("masthead.jpg");
}
```
This works because, unlike HTML which loads most resources regardless of their visibility, CSS loads resources only if the current layout builds a CSSOM which includes them. That means if your document's style tree changes later on to request a background image, the browser will fetch it the moment the change is applied. Leaning on this behavior is more sensible than using a mess of `data-` attributes pointing to possible image candidates, which could potentially add a bunch of extra markup and introduce edge cases that are difficult to code for.
## What about users without JavaScript?
Slap on some `