: How to create transparent 1 bit background as in the sample? I stumbled upon a background image with transparency I have never seen before (image below). When placed as a background-image
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.
More posts by @Carla748
1 Comments
Sorted by latest first Latest Oldest Best
Your experiments are along the correct lines, but there are a couple of steps missing.
Take your texture file into Photoshop and desaturate (Ctl-Shift-U) so you won't create color changes when you place it over a background color
Add a curves adjustment layer and flatten the curve so that your brightest points are at around mid-way and the black point is raised. Here are the settings I used:
Add a Posterize adjustment layer with no more than 7 or 8 levels. This is what gives you the reduction in file size on export to PNG. More levels, bigger PNG.
Now reduce the opacity to something like 40-50% and Save for Web as PNG-24 (PNG-8 won't work, because it doesn't give the fine alpha control).
My test image was 1920x1440, and the resulting PNG is 287k. Here is what it looks like laid over a background:
Terms of Use Create Support ticket Your support tickets Stock Market News! © vmapp.org2025 All Rights reserved.