How to randomly change background image in your bio page using Unsplash

How to randomly change background image in your bio page using Unsplash 4

In case you haven’t heard already – Unsplash is the place to go when you need royalty free photos to use in your projects, whether it’s for commercial use or not. I use it myself quite often, for large background images.

While they do have a great API for developers, they also give you the option to simply access random images via URL’s.

Here’s an example, generating a completely random image from their massive storage:

https://source.unsplash.com/random

Specific User

We can also generate a random image from a specific user. The URL format would be like so:

Click this link below to generate a random image from the user wsanter:

https://source.unsplash.com/user/wsanter

Specific Sizes

There’s also an option to set the size of the image you want generated. Like so:

Let’s generate a random image with the width and height of 300px:

https://source.unsplash.com/random/300×300

Random Image From Search Term

This one is really cool. You can generate images from search terms. Let’s search for city and night:

https://source.unsplash.com/random/?city,night

You place the search terms at the end of the URL, so before you could add the size if you’d like:

https://source.unsplash.com/random/900×700/?fruit

Example:

How to randomly change background image in your bio page using Unsplash 5

Putting it all together

Using these lines of code we will use random images from unsplash at a resolution of 1920X1080 using the search terms “city” and “night” and using the image as a cover for the background.

body{
   background-image: url("https://source.unsplash.com/random/1920X1080?city,night") !important; 
   background-size: cover  !important;
}

If we now combine this with an overlay, we can get a more dramatic result.

#profile.container{
    max-width: 100%;
    padding: 25px;
    margin-top: 0px !important;
    margin-left: 0px !important;
    margin-right: 0px !important;
    margin-bottom: 0px !important;
    background-color: #00000091;
}

At the end I applied a light template from the appearance tab so that the color switch automatically to a white buttons and black text and for the text on the background, white.

Remember: your preview screen while editing the biopage will show a different result, you have to “update” and the “preview” to see the final results.

End result

How to randomly change background image in your bio page using Unsplash 6

You can see this working example at https://myname.link/acmerichard, you need to reload the page in order to see the new background.