Lightening and Lowering Resolution Rendered On-The-Fly
As an example, each of these images is rendered in a 400px x 400px box.
First: A full resolution image.
Second: A 100x100 lightened, stretched image.
Wanted: Simple-to-Create Awesome Looking Background
I wanted something to change the website's plain white background. I didn't want to spend a lot of time learning to modify an image using Photoshop or some other tool
In Steps Unsplash with the Free-Use Images
If you're not familiar with Unsplash, it's a site that allows photographers to show their work, and for us consumers to use their work for free.
Usually the results are good when you search the hundreds of thousands of images
for terms such as audio mixer.
But, with that search, you may end up seeing some food blenders as well.
Audio Mixers on Unsplash
For my use, I want to be sure of what I'm going to get, so I've created some curated collections so I know I'll get something expected when I want a random close-up view of an audio mixer. SOVAT.org Mixer Closeup Collection
You Already Know CSS. Right? Or can figure it out.
I'm assuming you know enough about your website and CSS to know where to put the following snippet.
Creating a Full Page Background
Doing a web search for "css full page background" provides a lot of great results. Since I knew I just wanted the CSS clip, not looking for a lot of theory, I appreciated this site's highlighting of the required CSS code: Perfect Full Page Background Image
# style the root html element
html {
background: url(images/bg.jpg) no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
Deciding on a Background Image
We can use an image from Unsplash. But for a background image, we want the image well-sized, non-distracting, very light in color. What I decided on was a 200px x 200px image with reduced brightness and contrast.
Here's my chosen image in full size and resolution: Mixer Closeup Image (Below, I tell how to adjust the Unsplash image.)
If you place that long URL in your CSS, it'll work, but you'll get a very distracting background.
You should get your own image URLs
Even if you decided that you love this image for your own background, you should not use the image urls in this blog for your website. Unsplash would like you to get your own urls so they know how many people are using their free service.
Modifying the Image for Background
Unsplash allows us to add modifiers to the URL to change the size and make other adjustments.
Unsplash Officially-Supported Parameters
The Officially Supported Parameters allow for quite a bit of modification. However, they don't allow us to adjust the contrast or brightness.
Unofficially-Supported Parameters
That page mentions that other parameters are supported but may be removed by Unsplash without notice. They tell us to look at imgIX Rendering API Documentation.
The ones I was interested in was being able to lower the contrast and brightness. What I decided on was "-75" contrast and "25" brightness. So I need to add these to the Unsplash image URL:
&con=-75&bri=25
Downloading a Modified Unsplash Image
Publish as blog with "steps" for Google to find
Use different image -- not the SOVAT background
- Go to the desired Unsplash image such as Mixer Image
- Next to "Download" button, click the down arrow
- Right-Click "Original Size" and "Save link address"
- (The URL you get will be different)
- Add modifiers to the URL such as
&con=-75&bri=25&w=200&h=200 - Remove "&force=true" if you want to see the result in your browser before downloading