I want to create a background image which will flow into transparency.
I've found a lot of ways to put a gradient on a background image and that is working and all but i can't find how to let a image go to transparency. I even doubt if it is possible.
So again, i'm not looking for a gradient OVER a image but the image itself should be the gradient. I did find a way with a mask but that would make the whole div go from visible to invisible incl. everything in that div.
Would love some help! Thanks in advance.
You can use webkit-mask-image. Check Mozilla Developer network:
Browser Support for webkit-mask:
Check JS Fiddle
content: ""; background: url(https://images-na.ssl-images-amazon.com/images/G/01/img16/pet-products/vertical-store/promo-tiles/short-tile/32445_petsproducts_march-pets-site-flip-vertical-store_9_short-tile_592x304._CB299747463_.jpg) ; top: 0; left: 0; bottom: 0; right: 0; position: absolute; z-index: -1; -webkit-mask-image:-webkit-gradient(linear, left top, left bottom, from(rgba(0,0,0,1)), to(rgba(0,0,0,0)))