I stumbled upon a background image with transparency I have never seen before (image below).
- When placed as a background-image on web, it mantains the set background-color and only adds some "noise" to it.
- When you place a one-color 8-bit png picture with transparency over it, the foreground picture is perfectly visible - only a little "noise" added.
- It is also very small (<300 kB) compared to a duplicate PNG images I tried to create from scratch (>1.5 MB)
How can you achieve something like that?
I've tried (Photoshop):
- using a plastre wall texture image and save it as a 30% visible layer -> picture in the foreground is perfectly visible, but it won't maintain the background color set by css.
- using a plastre wall brush + grey color and paint transparent background with 50% brush transparency -> background color from css is maintained, but the picture in foreground is not visible for some colors.