This is a beta version of migrating these workshop materials to a new platform. If you run into issues please file an issue or click on the edit link above and submit a pull request. You can use the previous version of the workshop materials as a fallback.

Images in HTML

To understand how IIIF works, we’ll first want to understand some basics of how images work in HTML.

Here’s a simple example of how an image can be included on a web page.

<img src="babel.jpg">

Or here’s a full URL the the image.

<img src="">


Using a IIIF image in HTML is just as simple as adding it as the src of an img tag just like any other image:

<img src=",/0/default.jpg">

CSS Stylesheets

It is also possible to use IIIF images in CSS for background images.

<div id="css-demo"></div>
#css-demo {
  width: 800px;
  max-width: 100%;
  height: 300px;
  background-image: url(",/0/default.jpg");
  font-size: 3em;
  font-weight: bold;
  padding: 60px;
  color: #01AAFD;
Text Over Background Image