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.