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="https://upload.wikimedia.org/wikipedia/commons/thumb/2/29/Pieter_Bruegel_the_Elder_-_The_Tower_of_Babel_%28Rotterdam%29_-_Google_Art_Project.jpg/598px-Pieter_Bruegel_the_Elder_-_The_Tower_of_Babel_%28Rotterdam%29_-_Google_Art_Project.jpg">

IIIF in HTML

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="https://iiif.lib.ncsu.edu/iiif/ua021_428-001-cb0008-000-250_0001/full/400,/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("https://iiif.lib.ncsu.edu/iiif/ua021_428-001-cb0008-000-250_0001/full/800,/0/default.jpg");
  font-size: 3em;
  font-weight: bold;
  padding: 60px;
  color: #01AAFD;
}
Text Over Background Image