How do I make background semi transparent png image

[MoccaJoe]

Hi Guys,

I am currently working on a Kenya Safari site and use the Executive theme. I want to make the excerpt box in the genesis responsive slider transparent. As you will see following the link I have applied 60% opacity to the box's background but the text becomes transparent too. I don't want the text to be transparent.

Nick kindly told me this in his support ticket reply: "You would need to either set alpha transparency background color (which doesn't work in IE7 or IE8 and a few other browsers) or setup the background as a semi transparent png image. I like this method as it is 100% supported on anything newer than IE6 and a 1x1 image doesn't have much weight. You will want to set your transparency for the container to 100%"

My question to the community is: How do I do that - and how do I apply that to the css code?

Cheers,
Henrik

[Posh John]

I think what Nick means is to create an image to use for the background to the box. At the moment you have background set to #222 and opacity set to 0.6.

What you want to do is create an image (can be small because it will repeat) and have that image be transparent. You can create a transparent image in photoshop/fireworks etc. Then use the image instead of the colour #222 so;

background: url(images/my60percent.png) repeat;

You can then get rid of your opacity setting or set it to 1 (depending if you have opacity declared elsewhere)

---

Thus the heavens and the earth were completed in all their vast array. Genesis 2

[MoccaJoe]

Thanks Posh John - exactly what I needed. Had to keep the opacity setting though, to get IE to show the semi-transparency correct.

[hsimpson]

does anyone have a transparent background created that you can send me? I would also like to make the excerpt box in the slider transparent but I don't have the ability to create transparent images.  Can you also tell me exactly where I would insert the css code mentioned above that will work with the new transparent image?

 

Thanks!!

[Author]

Posts