DEV Community

Cover image for How to link Unsplash Images in Html and CSS
Alex Anie
Alex Anie

Posted on

127 1 1 1

How to link Unsplash Images in Html and CSS

If you are reading this blog, I assumed you already know what Unsplash is and if you don't know. Unsplash is a website for free stock photography images. Unsplash lets you download images directly to your computer or link images to your blog.

In this blog post, you will learn how to link images from Unsplash to your HTML or CSS stylesheet.

Linking Unsplash Image to HTML tags.

Once your HTML tag has been created, paste the image url to the src attribute in your HTML code.

Unspash requires a source keyword before the unsplash.com

Example 1



<main class="image__wrapper">
  <img src="https://source.unsplash.com/" alt="" width="300" >
</main>


Enter fullscreen mode Exit fullscreen mode

Then go to Unsplash and select any image of your choice.

  • Click on the image you want to link to your project

  • Copy the image id from the address bar on your browser and paste it after the forward-slash as indicated below.

How to link Image from Unsplash

Example 2



<main class="image__wrapper">
  <img src="https://source.unsplash.com/3tYZjGSBwbk" alt="" width="300" >
</main>


Enter fullscreen mode Exit fullscreen mode

Browser Preview

How to link Unspash images to your HTML file

Linking Unsplash image to CSS rule

The process remains the same. After you must have created your CSS rule, add the image to the background or background-image property as how below.

Example 3



 <main class="image__wrapper">
        <img src="" alt="" width="" >
  </main>


Enter fullscreen mode Exit fullscreen mode


main {
    background:url('https://source.unsplash.com/3tYZjGSBwbk');
    width: 300px;
    height: 400px;
    background-position: center;
    background-repeat: no-repeat;
    background-origin: content-box;
    background-size: cover;
}


Enter fullscreen mode Exit fullscreen mode

How to link Image from Unsplash

When you choose to use CSS to link your image, don't use the img tag or any other empty tags, as this will not work. this is because the img tag or empty tags are self-contained element and does not have a background.

Dont Use the Img tags to select images on CSS

Image description

Use a NON-Empty tag instead

Image description

Wrapping up

We learned about How to link Unsplash Images in Html and CSS and we discussed.

  • Linking Unsplash Image to HTML tags.

  • Linking Unsplash image to CSS rule

Alright! Weโ€™ve come to the end of this tutorial. Thanks for taking the time to read this article to completion. Feel free to ask questions. Iโ€™ll gladly reply. You can find me on Twitter and other social media @ocxigin. or email me at ocxigin@gmail.com

Cheers

Image of Timescale

๐Ÿš€ pgai Vectorizer: SQLAlchemy and LiteLLM Make Vector Search Simple

We built pgai Vectorizer to simplify embedding management for AI applicationsโ€”without needing a separate database or complex infrastructure. Since launch, developers have created over 3,000 vectorizers on Timescale Cloud, with many more self-hosted.

Read full post โ†’

Top comments (3)

Collapse
 
mikeritter profile image
mike ritter โ€ข

Unsplash Source has been sadly sunset. See unsplash.com/documentation/changel...

Collapse
 
priyanka_sam profile image
Priyanka โ€ข

Thank you so much It's working fine.

Collapse
 
simonkibongo profile image
KIBONGO Simon Peter ๐Ÿ‡ท๐Ÿ‡ผ โ€ข

So helpful

AWS Security LIVE!

Tune in for AWS Security LIVE!

Join AWS Security LIVE! for expert insights and actionable tips to protect your organization and keep security teams prepared.

Learn More