CODEWITHSUNDEEP
css
membersound
membersound

Reputation: 86747

How to add opacity on background?

How can I add opacity to the following CSS statement?

background: none repeat scroll 0 0 #205081;

Is there a possibility with css2? Else how can I add opacity statement from css3 there?

Upvotes: 0

Views: 647

Answers (2)

Simon Hayter
Simon Hayter

Reputation: 3171

Sadly to due various versions and browsers types across the globe there is not a single CSS entry that is compatible on all browsers without JavaScript intervention. You can however us multiple styling techinques and address the browsers which do not like the modern code using 'if IE 7' HTML in head.

Here are various methods that you should consider for max compatibility across browsers.

Adding an Alternative Method for Older Browsers

If you want transparent backgrounds in later versions of internet explorer the easist method is to style for older versions of browsers using older code. You can filter style rules by adding the following code within the

<head>
</head>

section of your HTML or PHP file.

HTML WITHIN HEAD

You should add the following code if you do not have it in place already. Many frameworks and CMS nowadays have this included so just view the source before editing and only add if its not their already.

<!--[if lt IE 7 ]><html class="ie ie6 no-js" lang="en"> <![endif]-->
<!--[if IE 7 ]><html class="ie ie7 no-js" lang="en"> <![endif]-->
<!--[if IE 8 ]><html class="ie ie8 no-js" lang="en"> <![endif]-->
<!--[if IE 9 ]><html class="ie ie9 no-js" lang="en"> <![endif]-->

Make a Transparent 50% PNG file

Simply load up any photoshop or any good alternative and make a new file 1x1 pixels, then add a new layer and delete the background. Then within the layer fill it with the color you want to use, then make this layer 50% opacity. Then save it as PNG and upload to your hosting. If your concerned about load time on pages then you can use PNGCrush or Smush.it to compress that PNG to less than 0.5kb.

In Your CSS add this (You will need to be using the IF 7 / 6 etc)

.ie6, .ie7, .ie8 .your-div-class-or-id {
    background: transparent;
    filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src=background.png,sizingMethod='scale');
}

}

CSS For Newer Browsers

You should use newer code for newer browsers whenever possible and by not using a PNG to give a transparent background it means that we are not increasing page loading time by adding a file fetch. Simply add: 

background: rgba(32, 80, 129, 0.5)

Which will work with Modern Browsers such as IE9+, Firefox, Chrome, Safari

You should use both modern and older CSS in conjunction

Please note that you use both CSS elements the RGBA and the AlphaImageloader, so the png file is only used when its absolutely required too, I know many are unfavorable for using PNG with Opacity but your only using this in the worse case and not loading it when a newer browser is used.

Upvotes: 1

Caelea
Caelea

Reputation: 2348

Use rgba(). In your case

background: rgba(32, 80, 129, 1)

where the last number is the opacity. 1 is for no transparency at all, 0 is invisible. So if you want that 50% opaque it will be

background: rgba(32, 80, 129, 0.5)

Upvotes: 2

Related Questions