How to link Unsplash images in HTML and CSS

Unsplash is an online platform that enables creators to contribute high-resolution stock images for personal and commercial use.

In this Answer, we will learn how to use the Unsplash API to upload images on Unsplash and to add images directly without downloading them.

Using HTML to link an Unsplash image

To link Unsplash images in HTML, we need to paste the image URL to the src attribute of the <img> tag. Unsplash requires a source keyword before unsplash.com in the following way:

We also require an image ID to link a specific image from Unsplash. This can be achieved through the following steps:

1. We click on the image that we want to link in the HTML code from the Unsplash website.

2. Then we copy the image ID from the address bar on the browser as shown in the image below.

3. Then, paste this ID after the forward slash of the URL in the HTML code as shown below.

Code example

Now, let's run the following code to get an idea of how it works actually.

Using the CSS rule to link an Unsplash image

When using the CSS rule to link an Unsplash image, we can add a link to the image in the values of background or background-image properties as shown below.

To use CSS to link an image, don’t use the img tag or any other empty tags because the img tag or empty tags are self-contained elements and don't have a background. We can use a non-empty tag (<main></main>) as shown in the above snippet.