Get Even More Visitors To Your Blog, Upgrade To A Business Listing >>

Partially transparent background image

Partially Transparent Background Image

Partially transparent background image


I have a question, since I couldn't find any solution yet.

So I have this image, which is fully Transparent in the "center" and partially on the border as you can see. What I'd like to achieve is, the "border" should be transparent and the "center" should be red.But the border should be fully transparent. So in this case, white.

I'm not sure if is this even possible with CSS or HTML, the reason why I need to do this in CSS or HTML because I'm looping through the database, and every displayed record would have a different background color, but the "border" should remain transparent. So creating the whole image in 10 colors or more is not an option for me, because then the site might would be too heavy.

Thank you very much guys,


So to be more precise, I've created another image, what I want to achieve. At the start I got the 2 images on the left side, the first one on the top is fully transparent in the middle, and has ~50% opacity on the border as you can see, so partially transparent. The second one is just an image, but the second image is always changing, like a slideshow.

The other image to the right would be the final result, I've set a gray background to be more visible. So what I have in my mind, is that possible? What I want to achieve is to cut the slideshow images border like this. But I don't want to photoshop every image which is in the slideshow, so I was thinking, maybe I can achieve something similar like this with CSS. I'm thinking in some z-index, or something. But thats not working, because I get an image like what I've linked on the top.

This is all I got:
My problem here is, I can see the image on the partially transparent border, I'd like to get something similar what is on the first image on the right (without the blue things of course, I couldn't cut it, I'm not a designer :P )

Problem courtesy of: csuty


Not sure if this is what you're looking for, but take a lok at this link : You might have to take a look at the PNG file format you're using.

Solution courtesy of: CJ Mendes


View additional discussion.

This post first appeared on CSS3 Recipes - The Solution To All Your Style Problems, please read the originial post: here

Share the post

Partially transparent background image


Subscribe to Css3 Recipes - The Solution To All Your Style Problems

Get updates delivered right to your inbox!

Thank you for your subscription