Question

I have an PNG image with a transparent area. It is a bit like a torn of checkout receipt with a zig-zag edge. It will sit at the bottom of a div with a white background to simulate a till receipt. I have tried this as follows.

 background: #ffffff url("../images/zigzag.png") bottom right no-repeat; 

But the background white fills right to the edge of the image

Aside from creating another div is there a way to stop the background colour going under the image?

Answer 1

Adding another div is probably the cleanest solution.

However, if the height of your div is limited, you can instead make the background of the div transparent and extend the top of the “ragged-edge” image with white pixels until it’s tall enough that it always provides a white background to the main part of the div.