Transparent pattern over website background with CSS

Last time we created an overlay pattern image using Photoshop. Today we will use that image on a website to give the full screen background a pattern overlay.

This kind of pattern overlays come in handy on websites with full screen photo backgrounds. They can make a website more readable so the users can focus on a content and not background.

Right-click here and Save link as... to download the pattern used in this tutorial, or:

  Website background overlay pattern using Photoshop

In your CSS file (styles.css in my case) enter the following code:

#bg_pattern { 

background-image: url(bg_pattern.png); 

position: fixed; 

opacity: 0.8; 

left: 0px; 

top: 0px; 

width: 100%; 

height: 100%; 

z-index: -1;

}

Replace the bg_pattern.png with the name and path to your own image.

You can also set the transparency level of your pattern using opacity style: 0 means full transparency, 0.5 half transparency and 1 no transparency.

In your source/html file, enter the following line of code:

<div id="bg_pattern"></div>

Where bg_pattern is the name of the CSS style you defined in the previous step.

And that is it!

Click here for the website with pattern background overlay.

Click here to download CSS file used in this tutorial.

Click here for the website without pattern background overlay.

Also recommended:

  Fullscreen HTML5 video website background

  A fake gradient website background with CSS