How to add opacity on background?


Tags: css

Problem :

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?



Solution :

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.


    CSS Howto..

    How to wrap text of html button with fixed width

    How to make CSS image transition smooth?

    how can I set my gradient background in css for full width and height of the page?

    How to leave input file button usefull for drag and drop from desktop, but avoiding local redirection

    How to set a image/icon width that was specified through css content property?

    How to make this layout in CSS?

    How to scroll with large pages with jQuery onepage-scroll plugin?

    How do I trigger the popup dialog box automatically from iWebkit?

    How can I trigger jQuery fadeIn() fadeOut() from a
    element

    How to determine the display order of
  • in a list with 4 columns?
  • How do i wrap a parent div to the width of a child div (dialog)?

    css divs display:none reseting and showing divs when function is called

    How can I refer to an internal gradient definition inside an SVG sprite symbol?

    How to strech vertically the container of inline-blocks?

    How to adjust navbar to a fixed width in Twitter Bootstrap?

    how to center a box using blueprint css framework

    How to calculate the length in pixels of a string with php - from another page on my website

    How do I add a link to my CSS background?

    How to make a picture responsive that is on wordpress custom post type through HTML/CSS

    how to scale image according to image - css

    How to keep footer at the bottom even with dynamic height website

    How to change css by using tag or class name in typescript?

    How to keep responsiveness while expanding div background height in CSS?

    How do I use CSS to let one or more elements fill remaining space?

    how to specify background text rectangle color in CSS

    How to figure out what is the right target to put in CSS

    How to animate an image as it grows from the width of a container to the full viewport width?

    How to properly add divs inside another div so the original design doesn't break?

    How to keep the link color on CSS buttons as one color when changing default link colors?

    CSS dropdown submenu with dynamic width: how to align left?