Question

I am trying to confine a background to a specific shape.

Example: I have a div or img tag that is square. Then I want part of it (the corners) to be transparent, and part of it (a diamond in the middle) to be a certain color (with background-color) or a certain image (with background-image).

I can simulate this by making a white png file that has a transparent diamond in the center, and setting the background of the image to what I want so the background shows through only in the diamond shape.

I want to get rid of the white part that shows around the edges (for example, have a transparent png with a white diamond in the center), but then the background will only show through on the edges. So basically, I want the background on the image to show where it isn’t transparent, and not where it is transparent. I am almost certain this has to done with images, but if you have another option, let me know.

Here is an example http://jsfiddle.net/r7jxm/. You can see that all the images have white edges where it should be transparent, so the images below don’t show through. I still need to be able to change the background colors in the end with css.

Answer 1

It doesn’t have the best support, but CSS masks do exist.

They sound like they would achieve what you want.