Background transparent images with CSS

This was something I ended up having to do, since i required background transparency. The opacity rule in CSS is very nice, but it also applies to all child elements of that element the rule is applied to.

Using Inkscape, I created a 1x1 image, and used the background: propery of css to have it tile across.

background: url(mytransparentbg.png) repeat scroll top center;

Needless to say, that didn't work. It would seem you need a larger image, since an individual pixel isn't enough to tile. So in Inkscape, I extended the 1x1 to 10x10, saved it, and the background worked as I expected.

While this may be obvious to some, and to me now, the size of the image stumped me initially.

In closing, I hope that the opacity rule in CSS improves, so it only applies it to that element, and not the children. It's easy enough to add a class to each element you need transparency.