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

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. By using it, you can change background image randomly on your bio profile pages

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:

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

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