Lesson 8

Images

Sourcing our images

Now that we've got our page looking at bit better, let's take a look at how we can add images to our project. You can use any images that are hosted online and all you need are the image URLs.

1. Choose some images

You could get images of your family from your Facebook, use some holiday snaps from Instagram or just find some pictures of cats in a search engine... (Snap Cat!)

If you use Google Images to search, we recommend you filter your search by size (click 'Tools', then click the dropdown menu 'Size' and select 'Medium'), and also filter 'Usage rights' to 'Labelled for reuse' to ensure they are copyright free.

In our tutorial, we are just going to use 5 images. However, you can use as many as you want. The more similar the images are, the harder the game will be. Be as creative as you like!

2. Add your images

Download some images giving them sensible names. Then use the green + icon in Thimble and 'Upload' to add your images.

3. Test your image URLs

Let's check our images are working properly. We can add some CSS to our canvas instructions to define the 'background-image' URL. When you add this code, your image should appear as the background of both canvas elements.

Make sure you test all your image URLs. They should have a similar structure to our example in the code above. The code above won't actually work though - you need to get your own images! Don't worry if you URL is really long, but it should end in something like .jpg, .jpeg or .png. These are all types of image file.

What is a URL?

URL stands for 'uniform resource locator' and it defines the location of a specific resource on the web.

3. Background image size and position

You might find that your images aren't filling the space in the way you would like. There are two properties for background that we can add - 'size' and 'position' which will help place the images so they fill the canvas element without distorting the aspect ratio and are positioned in the centre.

What is 'aspect ratio'?

Every screen and display has a particular aspect ratio, which is defined by the width and height of the display. One of the most common monitor aspect ratios is 16:9, but older monitors might have an aspect ratio of something like 16:10.

Go to the next lesson

index.html

style.css

the web page

New Window
Next Lesson