Home/ Questions/Q 9288751
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-18T19:59:03+00:00

How can I add opacity to the following CSS statement? background: none repeat scroll

  • 0

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?

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

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

    • 0