Transparent background color
SektorZ - July 5, 2008 - 08:09
Hey. How can I make the background color a little transparent so the background image would be visible trough it a little? Please help me with some code or at least point me to which line of scripts is the background color I'm looking for...
I'm using the bluecurve skin
I'm using the bluecurve skin by the way...
Basically you have to tile a
Basically you have to tile a semi transparent image file (png for example) over the background image - for example tile a 50% transparent png as a block background over a background image set on the body.
If using a transparent png you'll run into the IE5.5/IE6 issue, so look at the PNG Fix module or something like supersleight...
There is CSS opacity, but its not well supported and child elements inherit the setting (such as the text in the block), so its not so useful.
Thanks for the idea! Though,
Thanks for the idea! Though, my actual problem is I don't know how to do any of that, I can't code and don't know which file to edit (and what to add), could you give me some tips on which file it is and what lines of script I need to add to have that transparent PNG?
Actually no, I have never
Actually no, I have never used that theme so I know nothing about it, call it an exercise in learning - you won't regret working it out for yourself...
Oh well :/ Thanks for the
Oh well :/ Thanks for the help, I hope someone who did it will also care to post.
Yea. sorry about that, but
Yea. sorry about that, but most of us just don't have time to download and test every theme etc etc, if you have a live installation I can help (then I can tell you precisely what to do).
Basically its all in the CSS and the image file (tip - you'll need a program to create that transparent png file, such as Fireworks, Photoshop or Gimp).
What testing, example with
What testing, example with any theme would've helped me. I know about the image, thanks..
What testing? Testing to
What testing? Testing to make sure the code I write actually works for your theme.
I just need code for image
I just need code for image transparency, should work with any theme..
well the css will look
well the css will look something like this....
.my-background {background: url('path/to/image/my-semi-transparent-image.png');}
CSS: .my-div{ opacity:
CSS:
.my-div{
opacity: 0.9; /* 90% opacity for all modern browsers */
filter: alpha(opacity=90); /* 90% opacity for IE */
}
That's all there is to it. No need for PNGs.
If you want the background to be completely transparent, you can use the CSS "background: none;"
---
Yuriy Babenko
www.yubastudios.com
You can use that, but, the
You can use that, but wouldnt the child elements inherit the opacity, so you'd get transparent text also?
Right
That's right, this sets the opacity to the whole element and everything within.
If I only want the background to be transparent, I do this:
<div class="container">
<div class="bg"></div>
<div class="fg">my text</div>
</div>
<style>
.container { position: relative; }
.container .bg { background: #f00; filter: alpha(opacity=70); opacity: 0.7; position: relative; z-index: 1; }
.container .fg { left: 0; position: absolute; top: 0; z-index: 2; }
</style>
What this does is creates an element to be used as the background, gives it some opacity, and positions the "content" overtop.
(CSS may need some tweaking - I haven't used this trick in a few months and wrote this up without testing.)
---
Yuriy Babenko
www.yubastudios.com
Thanks alot guys, I
Thanks alot guys, I appreciate your time, will try it right away!