0
I have an HTML page where I need to render 3 images, one on top of each other. <div id="preview"> <img src="transparent-image"> </div> with the following CSS #preview{ background-image:url(layer0-image), url(layer1-image); background-size:100%, 100px; background-blend-mode: multiply; width: 820px; height: 350px; } The fist 2 images gets blended together using the CSS property background-blend-mode: multiply, on top of this I put the last image (transparent-image) with a transparent background (Imagine a photo of a room, with the wall area being transparent). The result is exactly what I want but when I try to put #preview{ width:100% } to make it responsive; It works flawlessly, but on ios the transparency is lost. I tested this behaviour on Chrome, Safari and Firefox (iOS). No problem at all on Chrome, Safari, Firefox on OSX, Android, Windows. Is there something I’m missing? Thanks for your time.