herghost Posted May 24, 2011 Share Posted May 24, 2011 Hi All, I have a problem where I cant get anything in a wrapper div appearing without opacity(ie normal) This is my css: @charset "utf-8"; /* CSS Document */ body { margin:0; padding:0; background-image:url(../images/mainbg.png); background-repeat:repeat-x; } #wrapper { min-height:400px; width:850px; margin:0 auto; margin-top:35px; background-color:#FFF; opacity:0.5; -moz-border-radius: 45px; border-radius: 45px; } #header { opacity:1; } and my html <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Site Title</title> <link href="style/main.css" rel="stylesheet" type="text/css" /> </head> <body> <div id="wrapper"> <div id="header"> <img src="images/header.png" /> </div> </div> </body> </html> basically the wrapper should be half transparent, but the header div should be as normal? Cheers Quote Link to comment https://forums.phpfreaks.com/topic/237355-opacity-help/ Share on other sites More sharing options...
herghost Posted May 24, 2011 Author Share Posted May 24, 2011 Got it with this #wrapper { min-height:400px; width:850px; margin:0 auto; margin-top:35px; -moz-border-radius: 45px; border-radius: 45px; position:relative; background: rgba(100%, 100%, 100%, 0.; } #header { margin-top:35px; position:absolute; opacity:1; } Quote Link to comment https://forums.phpfreaks.com/topic/237355-opacity-help/#findComment-1219680 Share on other sites More sharing options...
cssfreakie Posted May 24, 2011 Share Posted May 24, 2011 note though the rgba property only works for modern browsers Quote Link to comment https://forums.phpfreaks.com/topic/237355-opacity-help/#findComment-1219683 Share on other sites More sharing options...
herghost Posted May 24, 2011 Author Share Posted May 24, 2011 damn, and I thought I had it sorted! Whats the alternative for older browsers? Quote Link to comment https://forums.phpfreaks.com/topic/237355-opacity-help/#findComment-1219688 Share on other sites More sharing options...
cssfreakie Posted May 24, 2011 Share Posted May 24, 2011 they easiest way is to have a semi transparent .png (1x1pixel) and some javascript for ie6 and lower to support the semi transparency. just google for ie png fix javascript and some script should pop up. ie7 and later support transparent png's so make sure you use conditional comments for ie6 and lower. Quote Link to comment https://forums.phpfreaks.com/topic/237355-opacity-help/#findComment-1219707 Share on other sites More sharing options...
herghost Posted May 24, 2011 Author Share Posted May 24, 2011 Thanks cssfreakie Quote Link to comment https://forums.phpfreaks.com/topic/237355-opacity-help/#findComment-1219718 Share on other sites More sharing options...
Recommended Posts
Join the conversation
You can post now and register later. If you have an account, sign in now to post with your account.