Menu
Firefox, Internet Explorer, Opera accept following code:
<html>
<head>
<style type="text/css">
.minus
{
width: 11px;
height: 11px;
background-image: url("data:image/gif;base64,R0lGODlhCwALAIABAAAAAP///yH5BAEAAAEALAAAAAALAAsAAAIUhI8Wy6zdHlxyqnTBdHqHCoERlhQAOw");
}
</style>
</head>
<body>
<div class="minus">
</body>
</html>
Chrome (Version 19.0.1084.56) does not. Why?
481
This is a bug in Chrome, see bug #105725. The base64-string has to be padded. The following solution works fine: http://jsfiddle.net/TunfH/ (I have added == at the end).
<html>
<head>
<style type="text/css">
.minus
{
width: 11px;
height: 11px;
background-image: url("data:image/gif;base64,R0lGODlhCwALAIABAAAAAP///yH5BAEAAAEALAAAAAALAAsAAAIUhI8Wy6zdHlxyqnTBdHqHCoERlhQAOw==");
}
</style>
</head>
<body>
<div class="minus"></div>
</body>
</html>
Your base64 data is invalid, I believe you meant
data:image/gif;base64,R0lGODlhCwALAIABAAAAAP///yH5BAEAAAEALAAAAAALAAsAAAIUhI8Wy6zdHlxyqnTBdHqHCoERlhQAOw==
Which seems to work just fine in Chrome and Firefox [ what I have access to ]
I am guessing that Chrome has a slightly more strict base64 implementation and requires the padding.
38
Your problem is that you have "//" which you need to "escape" in order to avoid the err_invalid_url warning you see in the console
So take your:
R0lGODlhCwALAIABAAAAAP///yH5BAEAAAEALAAAAAALAAsAAAIUhI8Wy6zdHlxyqnTBdHqHCoERlhQAOw
And convert it to
R0lGODlhCwALAIABAAAAAP/%0a/%0a/yH5BAEAAAEALAAAAAALAAsAAAIUhI8Wy6zdHlxyqnTBdHqHCoERlhQAOw
And the it will show properly
The same solution should be used if the image starts with a "/" replace it with "%0a/"
38
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
