# Pure CSS Image Text with Fallbacks

## Pretty good support in modern browsers.

The H1 is text colored by a background image. This works well as of Firefox 51, Edge 38, Safari 10.0 Mobile, and Chrome 56. The fallback - white text over the image - works in FF 25, IE10, IE11.

Of note: Since version 49, Firefox will use `-webkit` prefixes by default .

References:

- https://sarasoueidan.com/blog/css-svg-clipping/
- http://www.hongkiat.com/blog/css-masking/
- http://nimbupani.com/using-background-clip-for-text-with-css-fallback.html
- https://codepen.io/yoksel/details/fsdbu
- http://code.stephenmorley.org/html-and-css/textured-and-patterned-text/

Test Screenshots:

- Chrome 53 on Android
- Safari 9.3 on iPad
- Safari 9.3 on iPhone
- Safari 10 on OSX
- IE8 on Win7
- IE9 on Win7
- IE10 on Win7
- IE11 on Win8
- Chrome 47 on WinXP
- Firefox 42 on WinXP