Dreevoo.com | Online Learning and Knowledge Sharing
 
Home | Programs | Programming languages | HTML | Transparent pattern over website background with CSS
Guest
Click to view your profile
Topics
Programs
Languages
Recipes
Home
Shortcuts
 
 

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.

 
  Author: mat | Version: | 11th February 2014 |  
 
 
1.
 

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:

 
 
2.
 

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.

 
 
3.
 

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!

 
 
4.
 

Click here for the website with pattern background overlay.

Click here to download CSS file used in this tutorial.

 
 
5.
 

Click here for the website without pattern background overlay.

Also recommended:


 
 
 
   
  Please login to post a comment
  Click to open user profile  
bikithalee, 25th Jun 2014, 12:42 AM
check this css full screen overlay...

http://www.corelangs.com/css/box/fulloverlay.html

bikitha

 
   
 
 
online learning made for people
Dreevoo.com | CONTRIBUTE | FORUM | INFO