vchris Posted May 25, 2006 Share Posted May 25, 2006 What I wanna know is let's say you have a main container for your site and you want a black or white glow around it but you have a gradient background. Usually I would make an image of the glow or the whole width of the site and there you go! In this case the background changes color depending on the height of the page. I checked with the css shadow thingy but I think it's only on 1 side not all around... Any of you have tricks for this?Same for pattern backgrounds. Usually the pattern doesn't align correctly... Link to comment Share on other sites More sharing options...
boen_robot Posted May 25, 2006 Share Posted May 25, 2006 Well, you could always use alpha transparent PNG for the glow, but then again, you'll have to hide from IE6 and lower using let's say a conditional comment and/or use some kind of alternative method for IE6. Link to comment Share on other sites More sharing options...
vchris Posted May 25, 2006 Author Share Posted May 25, 2006 That's too much trouble... If there is no easy way I guess I'll stick to solid colors background for glows or no glow and gradient or pattern background. Link to comment Share on other sites More sharing options...
boen_robot Posted May 25, 2006 Share Posted May 25, 2006 What I suggest is actually to always have a gradient background with an untransparent image, but also put a glow for browsers that support alpha transparent PNGs. Consireding the fact that IE7 now supports Alpha transparency, such methods would get very common really soon.I mean, I recently saw for example a shadow effect over an image with alpha transparent PNG and at the same time, the image is accessable for IE6 only without the shadow, but still looking good.I'm talking about the same thing here, with the only difference that our target is the background. Why don't offer better browser better experience, while still allowing non sufficient browsers the decent experience (which you are planning to use otherwise anyway). Link to comment Share on other sites More sharing options...
vchris Posted May 25, 2006 Author Share Posted May 25, 2006 I may try that.... so basically I need to save the glowing part of the image as a PNG and then with JS or server side detect the browser? Link to comment Share on other sites More sharing options...
boen_robot Posted May 25, 2006 Share Posted May 25, 2006 Consireding the fact that IE6 and below are our only target, I would suggest a conditional comment instead. <html><head><style type="text/css" media="screen">@import url("style.css");</style><!--[if lte IE 6]><style type="text/css">@import url("IE6style.css");</style><![endif]--></head><body><div id="wrapper"><!-- All other content --></div></body></html> Where style.css contains the styling with the background on the html element and the glow is used on the wrapper.IE6style.css on other hand would have #wrapper {background: none}; in order to hide the glow and it would still show the gradient image. Link to comment Share on other sites More sharing options...
vchris Posted May 25, 2006 Author Share Posted May 25, 2006 Thanks for the example. Link to comment Share on other sites More sharing options...
elementalgrace Posted December 4, 2007 Share Posted December 4, 2007 You can use a quick fix solution to simulate alpha transparency in IE5 & IE6 for transparent PNG images. I use it regularly and it's absolutely brilliant: http://www.twinhelix.com/css/iepngfix/ Link to comment Share on other sites More sharing options...
Akirira Posted December 7, 2007 Share Posted December 7, 2007 Hi!You can visit this http://homepage.ntlworld.com/bobosola/index.htm too.To sum up, you use javascript to make or "properly render" PNG alpha transparency.I want to tell you to use the fixed background property of css, but I fear to say a mistake... (I don't know if I can write "I fear to say"... ) Link to comment Share on other sites More sharing options...
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment
Create an account
Sign up for a new account in our community. It's easy!
Register a new accountSign in
Already have an account? Sign in here.
Sign In Now