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

Unsplash is the place to go for royalty-free photos. Their public source URLs accept a few parameters so you can pull a fresh random image — by user, by size, by search term — into your bio page background.

Why Unsplash

In case you haven't heard already, Unsplash is the place to go when you need royalty-free photos for your projects, whether it's for commercial use or not. The team behind Unsplash also makes their library available to developers via a public source URL pattern. That means you can ask for "a random image" — optionally constrained by size, by user, or by topic — and your bio page can pull a different photo on every visit, with zero asset management on your side.

A basic random image

The simplest URL form returns a random Unsplash photo:

https://source.unsplash.com/random

Random images from a specific user

If you want every refresh to pull from a particular photographer's portfolio, append /user/<username>:

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

Random images at a specific size

Specify dimensions in WIDTHxHEIGHT form (use the lowercase 'x' or the multiplication sign — both work):

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

Random images from search terms

Add a comma-separated list of keywords after ? to constrain the topic:

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

Combine size and search

You can stack both — a size and a keyword filter — for very tight control:

https://source.unsplash.com/random/900x700/?fruit

Apply it as a bio page background

Once you've picked the URL form you want, paste this into Settings → Custom CSS inside the bio page editor. The image will fill the viewport and re-fetch on each load:

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

Add a dark overlay for readable text

Because Unsplash photos can be very bright or very dark, your text might fight with the image for legibility. Drop a translucent black layer over the profile container to dim the background and keep the typography readable:

#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;
}

The #00000091 value is black at ~57% opacity. Lower the last two hex digits (the alpha channel) for a lighter overlay, or raise them to make the text stand out more against very busy photos.

Tip: a light template will automatically adjust button styles and text colors — pair the overlay with a light bio theme for the cleanest result.

About the preview window

Remember: your preview screen while editing the bio page will show a different result. You have to hit Update and then open the published page (or click Preview after saving) to see the final result. The editor preview does not pick up Unsplash's live URLs.