LATEST >>

Welcome Here And Thanks For Visiting. Like Us On Facebook...

EXEIdeas – Let's Your Mind Rock » CSS Codes / HTML-CSS-PHP-JavaScript » How To Add Opacity On Background Image Using CSS?

How To Add Opacity On Background Image Using CSS?

How-To-Add-Opacity-On-Background-Image-Using-CSS
Sometime a designer need to add some opacity to his web background images but for this he cant use opacity:0.5; like code as it drop full div/body opacity with data/text inside it that he do not want so to add opacity on background, some suggest to add a 1pxX1px opacity pixel on div background that can make complex codes too.

So now for this, we have some CSS3 codes that can do what you want without adding any extra image or without adding two or more div. Just add our suggested CSS3 codes that will add some opacity on your background image in dark and light color also. This is in real a gradient code but with some editing it can add opacity on your background images not on the text in it so you can add whatever you want in it.

Table of Contents

Features:

1.) No Need To Use Opacity Images.
2.) Pure CSS3 Codes.
3.) Full Features Code.
4.) All Browser Codes Added.
5.) Cross Browser Supported.

Here we are sharing CSS codes that you have to add in your template background image CSS. There are two type as first is for dark opacity and second is for light opacity. Try both and use whatever you want.

 .black_opacity{ background: -moz-linear-gradient(top, rgba(0,0,0,0.7) 0%, rgba(0,0,0,0.7) 100%), url('bg.jpg') repeat 0 0, url('bg.jpg') repeat 0 0;
 background: -moz-linear-gradient(top, rgba(0,0,0,0.7) 0%, rgba(0,0,0,0.7) 100%), url('bg.jpg') repeat 0 0;
 background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(0,0,0,0.7)), color-stop(100%,rgba(0,0,0,0.7))), url('bg.jpg') repeat 0 0;
 background: -webkit-linear-gradient(top, rgba(0,0,0,0.7) 0%,rgba(0,0,0,0.7) 100%), url('bg.jpg') repeat 0 0;
 background: -o-linear-gradient(top, rgba(0,0,0,0.7) 0%,rgba(0,0,0,0.7) 100%), url('bg.jpg') repeat 0 0;
 background: -ms-linear-gradient(top, rgba(0,0,0,0.7) 0%,rgba(0,0,0,0.7) 100%), url('bg.jpg') repeat 0 0;
 background: linear-gradient(to bottom, rgba(0,0,0,0.7) 0%,rgba(0,0,0,0.7) 100%), url('bg.jpg') repeat 0 0; }
 .white_opacity{ background: -moz-linear-gradient(top, rgba(255, 255, 255, 0.7) 0%, rgba(255, 255, 255, 0.7) 100%), url('bg.jpg') repeat 0 0, url('bg.jpg') repeat 0 0;
 background: -moz-linear-gradient(top, rgba(0,0,0,0.7) 0%, rgba(0,0,0,0.7) 100%), url('bg.jpg') repeat 0 0;
 background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(255, 255, 255, 0.7)), color-stop(100%,rgba(255, 255, 255, 0.7))), url('bg.jpg') repeat 0 0;
 background: -webkit-linear-gradient(top, rgba(255, 255, 255, 0.7) 0%,rgba(255, 255, 255, 0.7) 100%), url('bg.jpg') repeat 0 0;
 background: -o-linear-gradient(top, rgba(255, 255, 255, 0.7) 0%,rgba(255, 255, 255, 0.7) 100%), url('bg.jpg') repeat 0 0;
 background: -ms-linear-gradient(top, rgba(255, 255, 255, 0.7) 0%,rgba(255, 255, 255, 0.7) 100%), url('bg.jpg') repeat 0 0;
 background: linear-gradient(to bottom, rgba(255, 255, 255, 0.7) 0%,rgba(255, 255, 255, 0.7) 100%), url('bg.jpg') repeat 0 0; }

Customization:

Just change bg.jpg with your background image URL and that it. You can also add your rest of CSS.

Recommended For You:
How To Embed PDF File In Your WebPage Using Pure HTML5?

Last Words:

This is what we have for designers. So if you liked it then share it and leave your feedback. If you have quires then feel free to ask us.

You Like It, Please Share This Recipe With Your Friends Using...

6 Responses to “How To Add Opacity On Background Image Using CSS?”

  1. Sir Nice Post 🙂 I Love It

  2. Lisa Roberts says:

    Being a web designer I was not aware this latest technique Thanks a lot for sharing this defintely I will use this technique in my upcoming next client’s project

  3. Kevin Fonseca says:

    Thanks dude!!! I’ve been strugling with this for a very long time and now I get to finally make a good background image with opacity!

    • EXEIdeas says:

      Welcome here and thanks for reading our article and sharing your view. This will be very helpful to us to let us motivate to provide you more awesome and valuable content from different mind. Thanks for reading this article.

Leave a Reply

Your email address will not be published. Required fields are marked *