2014 October 27 Archive - EXEIdeas – Let's Your Mind Rock

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.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.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.