Need help with transparent background

[Vood]

Is there a way to have a background in my left sidebox (whole column) that is a darker color than my body background, yet is transparent so that the body background will show through? I want people to be able to read the text more easily, but don't want to completely cover up the background. Thanks in advance for any help on this.

Vood

[kobra]

If you have photoshop or similar and are applying a repeating tile for this darker color in the foreground open the tile in the graphic editor and set it's opacity

[Vood]

I tried that but must have done something wrong. I created a new image in photoshop and filled the background with the color. Then I set the transparency and exported it to a web-compatible format .gif. It came out really grainy and wasn't transparent at all. I will try again with an existing image. Maybe that will work better. Thanks.

Vood

[Vood]

I guess I don't know how to make a transparent image. It shows as transparent in photoshop and paintshop, but loses its transparency when I save it. What am I doing wrong? Probably not for this forum I guess. Thanks anyway.

Vood

[gjh42]

IE6 does not support opacity settings. A gif pixel and I think a png is either 100% transparent or 100% opaque.

One way to simulate the semitransparent effect (quite time-consuming) is to make your foreground pattern image and delete every other pixel, so alternate pixels are foreground or background. Feasible if you have a small foreground tile.

[gossamer]

hi. I think this may actually be a css issue. If you re familiar with css, and have dreamweaver, or a similar program... You will need to find the class, or id of the module you're trying to alter in your template folder. You will need to set the z-index of your top image, and use opacity in css. an explanation in this venue would take a while, and a whole lot of assumption about your abilities or resources... however here are some good tutorials
http://www.mandarindesign.com/opacity.html
http://www.cssplay.co.uk/opacity

[Vood]

Ok, here is what I have so far. I put the following code into my 'stylesheet.css'...

/* COLUMNS LEFT/ONE RIGHT/TWO */
#navColumnOneWrapper, #navColumnTwoWrapper {
margin: auto;
/* Mozilla ignores crazy MS image filters, so it will skip the following */
filter: progidXImageTransform.Microsoft.AlphaImageLoader(enabled=true,sizingMethod=scale, src=(../images/transbrwnback.png);
}

#navColumnOneWrapper, #navColumnTwoWrapper {
/* IE ignores styles with [attributes], so it will skip the following. */
background-image: url(../images/transbrwnback.png);
}


I used a very, very small .png transparency as the background. I works great in IE7 but not at all in Mozilla. In fact, Mozilla looks all screwed up. Some things are centered in Mozilla that appear left alligned in IE etc..etc... Here are the screenshots.

IE7 screenshot (looking good here)


Mozilla FFox (not so good here)

Any idea what I might be doing wrong? Thanks.

Vood

[Vood]

I got it working now. Thanks for the tips and links guys!

Vood