Using images

Images are a very critical part of modern web design—and there’s lots of different way to use and generate images on websites.

Choosing the right way to insert an image

Does the image require a caption?
Yes: Use a <figure> & <figcaption>.
Is the image an important part of the content?
Yes: Use an <img> tag with an appropriate alt attribute.
No: Use a CSS background-image.

Any image that is purely decoration should be in CSS. If that can’t accomplish what you want an <img> tag with an empty alt attribute will suffice.

Foreground images

Foreground images, or images inserted into HTML, use the HTML <img> tag.

Use the <img> tag when the image is an important part of the content—when the content would be confusing without the image.

<img src="images/logo.jpg">
<img src="images/icons/planet.jpg">
<img src="../images/photo.jpg">

☛ Refer to the tutorial on paths

Links

MDN: img

Alt attributes

All images inserted with the <img> tag must have an alt attribute:

<img src="pluto.jpg" alt="Photo of Pluto">

The alt attribute has two purposes:

To describe the photo if it doesn’t download in the browser
To describe the photo to someone who cannot see the image, maybe someone using a screen reader

When describing the image you should think about what content is most helpful for a user who cannot see the image. Describe what is important about the image.

Is the image fancy text? Then just write the word.
Is it a photo of a planet taken by a telescope? Write something like “Photo of Pluto taken with Hubble”
Is the photo meant to highlight a point? Write just the point, e.g. “Classic painting showing the triangle composition”
Is the graphic a chart? Describe the purpose of the chart, e.g. “A bar graph representing the orbital periods of planets in the Solar System”
Does the graphic not add any relevant information? Then it should be in your CSS. If that’s not possible, leave the alt empty, <img alt="">

Links

Figures & captions

Often you’ll need to provide a caption for your image, that’s where the <figure> element comes in handy.

<figure>
  <img src="pluto.jpg" alt="">
  <figcaption>Photo of Pluto taken with the Hubble Telescope</figcaption>
</figure>

Using the <figure> and <figcaption> elements we can associate a caption with an image.

You’ll notice that the alt attribute is empty in this situation. Often it’s not needed because the content of the caption would be no different than the alt attribute so we don’t want the information repeated.

Only use the figure element if your image needs a caption, if you don’t need a caption, don’t use the figure.

Links

Background images

Background images are inserted in CSS and do not use the HTML image tag. Use background images when the image is purely for decoration.

Background images can be inserted onto absolutely any HTML element, using the CSS property background-image:

body {
  /* Will add a background to the whole page */
  background-image: url("../images/grey-box.png");
}

The url() function requires you to specify the image in relation to the CSS document. If your CSS file is inside a folder the path will need to exit that folder using ../.

☛ Refer to the tutorial on paths

Links

I can’t see the background image

First, double check that you’ve spelled the file name properly and that the path is correct. Use the developer tools to confirm the image is loaded by the browser.

You will only be able to see the background image if the containing element takes up space on the screen—either by having content or having a height.

<div></div>

div {
  background-image: url("../images/pic.jpg");
}

In the scenario above, we wouldn’t see the background image because the <div> has no content inside it. Elements that have no content collapse to 0 pixels tall.

We could solve this problem in a few ways:

Put something inside the <div>:

<div>
  <h1>Dinosaurs!</h1>
</div>

Add a height to the <div>—not a very good solution:

div {
  height: 14em;
}

Add padding-top to the <div> to expand it’s dimensions—a good solution for maintaining aspect ratio:

div {
  padding-top: 4em;
}

Maintaining aspect ratio

If we want the element that has a background image to maintain the aspect ratio of the image we can use padding-top in percents. This is a great solution for banner graphics and responsive sites, especially used together with position: absolute and background-size.

First we have to figure out the percentage for the aspect ratio of our image. Here’s the formula to do that:

(image height ÷ image width) × 100

As an example, an image with these dimensions: 1920 × 1080

(1080 ÷ 1920) × 100 = 56.25

So, our CSS would look like this:

div {
  padding-top: 56.25%;
}

When used with background-size we can scale the element to fit the same aspect ratio of the image.

Background repeat

By default the background image will try to form a pattern by repeating itself both horizontally and vertically.

To control the patterning effect of the background image you can use background-repeat:

no-repeat — shut off repeating, showing the image only once
repeat-x — pattern only horizontally
repeat-y — pattern only vertically
repeat — the default, pattern both horizontally and verticallly

body {
  background-repeat: no-repeat;
}

h1 {
  background-repeat: repeat-x;
}

Links

Background position

The background-position allows us to control where in the element the image is located. We can use keywords, percents, or fixed measurements.

When defining background-position we must always specify the horizontal & vertical positions—horizontal first, vertical second.

keywords — move the the element to specific set points: top, bottom, left, right, center
% — align the images point at that percentage to the element’s point at that percentage—keywords just map to percentages
px, em, rem — always start in the top-left corner of the image and the element

body {
  background-position: right bottom;
  /* Same as: */
  background-position: 100% 100%;
}

h1 {
  background-position: center top;
  /* Same as: */
  background-position: 50% 0;
}

div {
  background-position: 10px 10px;
}

If you want to move the background image a fixed measurement from the bottom or right you can use calc():

div {
  /* Centered horizontally, 10px up from the bottom */
  background-position: center calc(100% - 10px);
}

Links

Background size

The CSS background-size property allows us to scale the image.

cover — scale the image to fill the whole element
contain — scale the image so all of it is visible in the element
auto — maintain the aspect ratio when scaling
% — scale the image based on the element its inside
px, em, rem — scale the image to a fixed measurement

Just like background position we must style first the horizontal size then the vertical size. Or we can use a couple keywords for scaling.

body {
  /* Scale the image to be 70% the width of the container, figure out the correct height */
  background-size: 70% auto;
}

h1 {
  /* Fill the whole element with the image */
  background-size: cover;
}

div {
  /* Figure out the width, set the height to 200 pixels */
  background-size: auto 200px;
}

Links

Background attachment

Background attachment allows us to control how the image scrolls: either it scrolls with the page, or stays in place:

fixed — image doesn’t move when scrolling the page
scroll — default, the image moves with the element its inside

body {
  background-attachment: fixed;
}

Links

Multiple background images

An element can has as many background images as you’d like, just separate each image with a comma:

body {
  background-image: url("grey-box.png"), url("dark-grey-box.png");
}

After specifying multiple background images all the other properties can then have commas to control the other images:

body {
  background-size: 100px auto, 75px auto;
  background-position: left top, right top;
  /* One value will apply to all images */
  background-repeat: no-repeat;
}

Gradients

The browser can generate background images for us in the form of gradients: linear, radial, and repeating variants.

Linear gradients

Linear gradients are a gradient built in a single direction, we can specify the direction of our gradient as well as many colour stops.

body {
  /* linear-gradient(direction, colour stops…) */
  background-image: linear-gradient(to right, purple, indigo);
}

Direction

The gradient direction is specified similarly to background-position.

to left — completely flat, starting at the right and moving to the left
to right bottom — starting in the left-top corner and moving to the right-bottom
to bottom — straight up and down

The direction can also be written using degrees

45deg — a 45° angled gradient
-12deg — a -13° angled gradient

body {
  background-image: linear-gradient(to left, purple, indigo);
  background-image: linear-gradient(to right bottom, purple, indigo);
  background-image: linear-gradient(45deg, purple, indigo);
}

Colour stops

With gradients we can specify as many colour stops as we’d like, with of course, a minimum of 2.

Here’s a rainbow gradient:

body {
  background-image: linear-gradient(to right, red, orange, yellow, green, blue, indigo, violet);
}

With colour stops we can also specify their position using a value:

body {
  /* This gradient will create a sharp line between red & blue at 40% */
  background-image: linear-gradient(to bottom, red, red 40%, blue 41%, blue);
}

Radial gradients

Radial gradients are based around an ellipse or circle, which are the first argument.

body {
  background-image: radial-gradient(circle, green, darkgreen);
}

Repeating gradients

Repeating gradients both linear and radial allow us to create simple patterns.

div {
  /* Warning stripes */
  background-image: repeating-linear-gradient(45deg, yellow, yellow 10%, black 10%, black 20%);
}

Links

Shorthand

All of the above background properties can be combined together into a shorthand notation, similar to font.

background: background-image background-position / background-size background-repeat background-color

body {
  background: url("bg.jpg") left top / 100px auto repeat-y red;
}

It can even be used with multiple background images:

body {
  background:
    url("grey-box.png") left top / 100px auto no-repeat,
    url("dark-grey-box.png") right top / 75px auto no-repeat,
    linear-gradient(to bottom, transparent, rgba(0,0,0,0,5))
  ;
}

It’s sometimes nice to add each image on its own line for clarity.

Links

Sprites

Sprites allow us to combine our images into a single file in Photoshop and using background-position show only a single part of the image at a time.

<div class="icon icon-circle"></div>
<div class="icon icon-hex"></div>
<div class="icon icon-star"></div>

.icon {
  width: 100px;
  height: 100px;
  background-image: url("icons.png");
  background-repeat: no-repeat;
}

.icon-circle {
  background-position: 0 0;
}

.icon-hex {
  background-position: 0 -100px;
}

.icon-star {
  background-position: 0 -200px;
}

We adjust the position of the background image to only show a portion of it in the element—kind of like a clipping mask.

Changing images on hover

The best way to change images when you hover is to use sprites: create a sprite with both the default and the hover versions of the images, then just apply some CSS.

.star {
  display: inline-block;
  width: 50px;
  height: 50px;
  background: transparent url("../images/star.svg") no-repeat 0 0;
}

.star:hover {
  /* Change the background position on hover */
  background-position: 0 -50px;
}

The trick is to just adjust the background position when the user hovers over the element.

Links

Image replacement

Image replacement is a technique to replace text on the page with an image in an accessible manner.

The technique is useful when you cannot produce the text style you’d like in CSS.

<h1 class="masthead ir">Rainbows</h1>

.ir {
  /* The technique pushes the text off the side of the element and chops it off */
  overflow: hidden;
  text-indent: 100%;
  white-space: nowrap;
}

.masthead {
  background: url("rainbow.jpg") left top no-repeat transparent;
  /* Put a min-height on the element equal to the image’s height */
  min-height: 100px;
}

Links

Zeldman: New Image Replacement

Patterns

Patterns are simple to use in CSS because of the background-repeat property, but not always the easiest to set up. Check out the video where I debug a pattern.

Links

Border images

Border images allow us to slice an image into 9 pieces and use those pieces on a border instead of the built-in border styles.

Slicing an image into 9 pieces

The first thing to think about when creating a border image is that it will be sliced into 9 different pieces to be used in different locations in the border.

Here’s an example of a 9-sliced image:

The grid patterns creates 9 different pieces out of the image:

The top-left corner
The top-centre edge
The top-right corner
The right-centre edge
The bottom-right corner
The bottom-centre edge
The bottom-left corner
The left-centre edge
The centre—which isn’t used anywhere

Now that we can see how the image is sliced we can insert it into the border.

Inserting the image into the border

It’s often best to first put a standard border when using border-image, as a fallback in-case the image doesn’t download.

Then we add a property to define the border-image itself.

.box {
  border: 36px solid purple;
  border-image: url("../images/border-image.svg") 36px;
}

The 36px part in both the border and border-image is important: it maps to the slices of the image. In the above image there’s a simple slice: equal 36px on every side.

But we could slice the image 4 times, and use 4 different numbers:

.box {
  border-image-slice: 12px 14px 16px 18px;
}

If we specify 4 numbers we are cutting the image this way:

12px down from the top
14px in from the right
16px up from the bottom
18px in from the left

Gradient as a border image

One fun addition to border images is that we can use gradients because they are just images generated by the browser.

.unicorn-btn {
  border: 4px solid magenta;
  border-image-source: linear-gradient(to right, red, orange, yellow, green, blue, indigo, violet);
  border-image-slice: 1;
}

This will produce and amazing rainbow gradient that goes from left to right around the edge of the button.

Links

Using images

Choosing the right way to insert an image

Foreground images

Alt attributes

Figures & captions

Background images

I can’t see the background image

Maintaining aspect ratio

Background repeat

Background position

Background size

Background attachment

Multiple background images

Gradients

Linear gradients

Direction

Colour stops

Radial gradients

Repeating gradients

Shorthand

Sprites

Changing images on hover

Image replacement

Patterns

Border images

Slicing an image into 9 pieces

Inserting the image into the border

Gradient as a border image

Video list