CODEWITHSUNDEEP
htmlcssinternet-explorer-9data-uri
niceman
niceman

Reputation: 2673

How to set background image of a button to a base64 encoded image in ie 9+?

I have a button in my webpage which I want to set its background image to a base64 encoded data URI like this: 

<button type="button" disabled="true" style="width: 350px; height: 220px; background-image: url(&quot;data:image/png;base64, Qa=...;);"></button>

The button above works in chrome, Firefox, and IE11 but not in IE9. The button is showing but the background image isn't shown. So How do I make it work in IE9?

Please note that all google results showed how to support IE8+ or svgs and what I want is to supported in IE9 with base64 data URI.

Upvotes: 2

Views: 7470

Answers (1)

Racil Hilan
Racil Hilan

Reputation: 25371

According to https://caniuse.com/#feat=datauri, data URIs can be used in IE8 and up, but there is a note that for IE8, the max URI length is 32KB. This should work in IE9 just like it does in IE11, but don't use &quot; and make sure there is no space after the first comma or anywhere else in the value:

<button type="button" disabled="true" style="width: 350px; height: 220px; background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAQAAAADCAIAAAA7ljmRAAAAGElEQVQIW2P4DwcMDAxAfBvMAhEQMYgcACEHG8ELxtbPAAAAAElFTkSuQmCC);"></button>

Upvotes: 1

Related Questions