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 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; } 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 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? 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. 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 Link to comment https://forums.phpfreaks.com/topic/237355-opacity-help/#findComment-1219718 Share on other sites More sharing options...
Recommended Posts
Archived
This topic is now archived and is closed to further replies.