How to Overlay Stripes & Dots on Background Images & Videos Using CSS

Design is thinking made visible. ~ Saul Bass ~

Sourcing free royalty-free images and clip arts, and background videos is not difficult these days.

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.

There is, however, more to unique image creation than simply reducing the sizes, fortunately, there are excellent online tools like Stencil, Canva, and others that help you do a great job.

 

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:

  1. 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.
  2. 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?

The answer is, yes you can. But you need to overlay them with stripes, dots or other patterns that sort of help you offset the low quality of the media file underneath.

 

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.

In other words, the important information is pushed to the front and the visual support to the back for a pleasant overall appearance.

The 3 images below clearly show the difference between images with the overlay (top and bottom) and the one without (in the middle).

This overlay is light blue diagonal lines.

This image has no overlay.

This overlay is black dots.

 

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.

Patternify gives you the ‘Base64 code’, so you don’t even need an image file anymore, just include the code in your CSS and you’re ready to go!

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.

Creating overlay pattern image

Using Patternify to create transparent overlay image with Base64 code

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.

Example 1

Can you see the overlay pattern?

<div style="width: 100%; height: 439px; background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAAKCAYAAACNMs+9AAAANklEQVQYlWNYtWqVMQMSWLVqlTE2MQZcAhiS+CQImoTVZGyKsComWiHRVpPkGVyewqsLV4ADAEr5TuVwzxgzAAAAAElFTkSuQmCC) repeat, url(https://hubskills.com/bg-1.png); background-position: left top;
background-repeat: repeat;">
<p style="position: relative; top: 200px; font-size: 2.8em; font-family: georgia; letter-spacing: -.06em; font-weight: 600; text-align: center; color: rgba(25,25,25,0.65); line-height: 1.1;">Can you see the overlay pattern?</p>
</div>

Example 2

Google’s map of my place of work.

<div style="width: 100%; height: 500px; background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAAICAYAAADA+m62AAAAJ0lEQVQYlWNgQAcWRg0YYjgV4VWMLolVMS4TUMQJuYkoN5OlmFgAAEwjCSWY5tkXAAAAAElFTkSuQmCC) repeat, url(https://hubskills.com/bg-2.png); background-position: left top;
background-repeat: repeat;">
<p style="position: relative; top: 225px; font-size: 2.8em; font-family: georgia; letter-spacing: -.06em; font-weight: 600; text-align: center; color: rgba(25,25,25,0.65); line-height: 1.1;">Google's map of my place of work.</p>
</div>

Example 3

This is an overlay on animation.

<div style="width: 480px; height: 376px; background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAICAYAAADED76LAAAAQElEQVQYlW2OwQ0AMAgCbw7XcMFubj81RVpeGgIcQHK1gJC/+shjtkLNTmpTaZMm05IB76YzfTedaW46k28Opg1VYQ5hW3JdzwAAAABJRU5ErkJggg==) repeat, url(https://hubskills.com/bg-anim-1.gif); background-position: left top;
background-repeat: repeat;">
<p style="padding-top: 50px; font-size: 2.8em; font-family: georgia; letter-spacing: -.06em; font-weight: 600; text-align: center; color: rgba(255,255,255,0.95); text-shadow: 1px 1px 2px #000; line-height: 1.1;">This is an overlay on animation.</p>
</div>

 

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.

Once you’ve decided the pattern and its opacity, just click on the corresponding arrow sign and proceed to download the pattern on your computer as a small 4px by 4px PNG file.

See the illustration below.

Transparent overlay image in PNG

Creating transparent overlay PNG image from among 30 designs

Here below are some images with different overlays. I’ve also given the HTML code after each of them.

Example 4

This overlay is black vertical stripes.

<div style="width: 100%; height: 439px; background: url(https://hubskills.com/stripes-1.png) repeat, url(https://hubskills.com/bg-1.png); background-position: left top;
background-repeat: repeat;">
<p style="position: relative; top: 200px; font-size: 2.6em; font-family: georgia; letter-spacing: -.06em; font-weight: 600; text-align: center; color: rgba(250,250,0,.8); text-shadow: 1px 1px 1px #333; line-height: 1.1;">This overlay is black vertical stripes.</p>
</div>

Example 5

This overlay is white diagonal lines.

<div style="width: 100%; height: 439px; background: url(https://hubskills.com/lines-1.png) repeat, url(https://hubskills.com/bg-1.png); background-position: left top;
background-repeat: repeat;">
<p style="position: relative; top: 240px; font-size: 2.6em; font-family: georgia; letter-spacing: -.06em; font-weight: 600; text-align: center; color: rgba(255,255,255,0.9); text-shadow: 1px 1px 1px #2a2a2a; line-height: 1.1">This overlay is white diagonal lines.</p>
</div>

 

Summing up

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.

 

2017-04-02T11:06:05+00:00 Web Design|

Leave A Comment

You Deserve A Career You Love

Get all the practical tips to plan your online teaching strategy and successfully launch your education website online 
Download Ebook
No Thanks!
close-link
This is a Special Ebook for online teacher

Online Teaching Guide

for Solo Unaided Teachers
Download Now
Get the e-book! Start planning your education website today.
close-link

Learn Some PowerPoint Tricks?

Get 7 unique PPT video tricks delivered straight to your inbox!
I WANT THIS!
Close