Daily Archive for July 1st, 2010

How to use transparency with different Browsers

How to:

One more snippet …

I hab trouble with transparency backgrounds and the different Browser interpretation, ahhrgh. But finally i found a cool summary.

take this:

div .test {
   background: rgb(255, 255, 255); /* fallback for all old guys */
   background: rgba(2255, 255, 255, 0.5);
}

Internet Explorer need a special treatment, via conditional comment

<!--[if lt IE 9]>
div .test {background:#fff; filter:alpha(opacity=50);}
<![endif]-->

Thats all. Enjoy it.

CSS: center background image in Firefox & Co.

Today just a short snippet.

To center a background image vertical and horizontal especially Mozilla Firefox need the attribute “fixed”:

body {
background-image: url(....);
background-position: center center;
background-attachment: fixed;
height: 100%;
}

Tested with: IE 6 – 8, Firefox 3.6, Safari 4

With this little trick, my day will be fine! Ole.