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

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 |  

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:


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:

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



  Click to open user profile  
gegegerianian, 12th May 2021, 9:46 PM
What is particularly great about our buy essay http://papernow.org/do-my-assignment online writing service is that you can easily contact us anytime and ask all those burning questions you have.
  Click to open user profile  
Hawleymartin, 6th Oct 2021, 1:16 PM
Transparent CSS is issue I have faced in my recent website but then I got know this website that is one of the best example for that

  Click to open user profile  
propharmacyst, 26th Jan 2023, 11:05 AM
We also offer Vidalista 80, a high-strength version of generic Cialis. This medication is ideal for men who need a higher dose to achieve and maintain an erection. Like our other generic Cialis products, Vidalista 80 is just as effective as the brand-name version but much more affordable.Vidalista 80 from ProPharmacyStores store. Visit at: https://propharmacystores.com/product/bu....
online learning made for people