Notice: Undefined index: order_next_posts in /nas/content/live/gadgetmag/wp-content/plugins/smart-scroll-posts/smart-scroll-posts.php on line 194

Notice: Undefined index: post_link_target in /nas/content/live/gadgetmag/wp-content/plugins/smart-scroll-posts/smart-scroll-posts.php on line 195

Notice: Undefined index: posts_featured_size in /nas/content/live/gadgetmag/wp-content/plugins/smart-scroll-posts/smart-scroll-posts.php on line 196

6 steps to an animated vintage background with HTML & CSS

Create a vintage flickering background effect to add authenticity to designs

Create a vintage flickering background effect to add authenticity to designs


As seen on | Get the tutorial code

With the web being such a new medium and it only existing on shiny screens, it is important that websites are able to capture the mood of what is trying to be designed, going beyond the gloss that computers bring.

The St. Louis Browns baseball team have a great microsite dedicated to the historical society of the team. As the site is dealing with history it chronicles the team’s story through a timeline approach using a single-page scrolling design. To give maximum impact to the page, the first image takes up exactly the size of the browser window and there is a lovingly crafted vintage, film grain and scratches effect over the top of the image.

This is created by stretching an MP4 movie with dust and scratches over the top of the image, with a very low opacity that allows the original image to show through. The effect is subtle due to the low opacity – it is not distracting to the viewer but at the same time it instantly communicates a sense of age and the historical legacy of the team. To continue this theme, all of the images used have a slightly worn look to them as if the ink hasn’t quite adhered to the block when printed. This takes the design beyond shiny computer graphics and reinforces the theme to the user.


Create a composition

In After Effects create a new composition 1000 x 562 pixels, 24 frames per second with a duration of 2 seconds and 1 frame. Click OK to create this, then go to Layer>New>Solid and choose black as the layer colour.

Add noise

Add a Tint effect to this layer. Turn on the stopwatch to add keyframes and at different points along the timeline change the tint colour to different greys or blacks. Now use the Add Grain effect, then make the noise monochromatic and turn the intensity up.

Random lines

Deselect all layers and grab the Pen tool. Click at the top and then the bottom to draw a line. Make sure it has a white stroke. Now add keyframes for it at different places along the timeline, moving the line on the screen for each keyframe. Repeat this step with another layer.

Add to render queue

Next we will go to Composition>Add to Render Queue. Here we will leave all of the options at default and then just hit the Render button. After that we will put the video through Miro Video Converter ( to get an MP4 file that is more suitable for playing on the web.

Over to CSS

In the CSS for your web project add the following rules. The body is set to have an image covering the background, while the video is set to have a very low opacity, stretched over the top of the image, to give the flicker effect over the top.

body, html{
margin: 0; padding: 0;
background: url(img/bg.jpg) no-repeat center center fixed;
background-size: cover;
video {
position: absolute;
z-index: 100;
top: 0; left: 0;
min-width: 100%; min-height: 100%;
opacity: .0875; filter: alpha(opacity=8);

Add the video tag

In the body section of your code add the video tag as shown below. The CSS will automatically place this over other content and stretch to fill the screen. Save the file and view it in a web browser to see the flicker effect over the top of the image.

<video src="img/flicker.mp4" loop autoplay></video>