Design is thinking made visible. ~ Saul Bass ~
Most of these (if not all) are free of copyrights under Creative Commons CC0. That means you may download, modify, distribute, and use them royalty-free for anything you like, even in commercial applications. Attribution is usually not required.
While sourcing free images or videos is easy, making them ready for use in the blog is a different ballgame. For example, many of the free images are quite large both in size and dimensions, you must know how to optimize the images and reduce the file size.
Quality of image or video for background use
When you are planning to use an image or a video for a page background, the biggest worry is controlling the file size. Two opposite things happen simultaneously:
- The browser takes more time to load the image or the video even as other components in the page load relatively faster. If the server speed is slow then this problem becomes even more stark and noticeable.
- The viewer’s expectation and eagerness to see the page in full reduces with each passing second or millisecond (if you will). As a result, the viewer leaves the page rather early without seeing the rest of the page which might have already loaded.
The solution to this problem lies in reducing the byte-size or kilobyte-size of the media file to the extent possible. When you do this, you risk the possibility of the media file becoming pixelated and unclear.
The question is, can you use such an image or video for the background?
Using stripes, dots, other patterns – the rationale
I’ve explained above the reason of using high-resolution, transparent layer of patterns on backgrounds of low-quality image or video. If done rightly, pattern overlays can help make low-quality images and videos appear sharper.
There is another important reason for doing this.
The visual style of many a website requires the image or video pushed into the background but still making it visible enough after the transparent overlay of patterns is imposed on it.
What this achieves is separating the foreground from the background while maintaining the high contrast of text, menu, logo, etc. created at the top.
The 3 images below clearly show the difference between images with the overlay (top and bottom) and the one without (in the middle).
Creating overlay using CSS
There are many ways to create transparent overlays using CSS, for example I’ve used the
RADIAL-GRADIENT() function to create an evenly-placed dotted overlay on images.
In this article, we’ll see the use of layering multiple background images, which is a bit simpler to achieve the same purpose.
For this, the first step is to create a transparent pattern image. Let’s use 2 free resources to create some pattern images for our use later.
1. Patternify – a CSS pattern generator
Go over to Patternify, and you’ll soon see how easy it is to create patterns as you want.
Patternify is the brainchild of Sacha Greif, a coder-cum-designer, who created the tool to escape the pain of using Photoshop for just creating 2px by 2px stripe pattern.
Take a look at the following illustration. The work area in Patternify has 2 main parts, on the left is where you design your pattern, on the right you can review the pattern and of course get the Base64 CSS code as well.
Okay, let’s now create an overlay with the Base64 code from Patternify. Given below are some images with different overlays. I’ve also given the HTML code after each of them.
Can you see the overlay pattern?
Google’s map of my place of work.
This is an overlay on animation.
2. Pattern Overlays from BG Stock
There is a total of 30 patterns to choose from here. From dots to squares, to lines, stripes, broken lines, diagonal lines, zig zag, and more, all the patterns are available in white and black colors.
Live demo is available. The pattern you select is immediately superimposed on a background video to enable you to check out which one you want.
The video can be paused if doing so can help. There is a scale that allows you to alter the opacity of the pattern you select.
See the illustration below.
Here below are some images with different overlays. I’ve also given the HTML code after each of them.
This overlay is black vertical stripes.
This overlay is white diagonal lines.
For some time there is a lot of craze for full-screen HTML5 video as the page background. Although usability experts caution against excessive use of video as background, it nevertheless continues to be quite popular among web designers.
Refer this excellent hands-on guide along with CSS codes for HTML5 video as background.
Leave your comments and suggestions in the comment box below.