Is there a way to set background-image as a base64 encoded image

Question

I want to change background dynamically in JS and my set of images is in base64 encoded  I try   document getElementById  bg image   style backgroundImage        url  http   amigo com 300107-2853 jpg        with perfect result    yet I fail to do the same with      document getElementById  bg image   style backgroundImage        url  data image png base64 iVBORw0KGgoAAAAAAAAyCAYAAAAUYybjAAAgAElE          nor   document getElementById  bg image   style backgroundImage        data image png base64 iVBORw0KGgoAAAAAAAAyCAYAAAAUYybjAAAgAElE        Is there any way to do it

User · Answer

What I usually do  is to store the full string into a variable first  like so    lt  php  img id    data image png base64 iVBORw0KGgoAAAAAAAAyCAY        gt    Then  where I want either JS to do something with that variable    lt script type  text javascript  gt  document getElementById  img id   backgroundImage  url   lt  php echo  img id    gt       lt  script gt    You could reference the same variable via PHP directly using something like    lt img src   lt  php echo  img id    gt   gt    Works for me

User · Answer

Had the same problem with base64  For anyone in the future with the same problem   url    data image png base64 iVBORw0KGgoAAAAAAAAyCAYAAAAUYybjAAAgAElE        This would work executed from console  but not from within a script    img css  background-image    url      url            But after playing with it a bit  I came up with this   var img   new Image    img src   url   img css  background-image    url      img src            No idea why it works with a proxy image  but it does  Tested on Firefox Dev 37 and Chrome 40   Hope it helps someone   EDIT  Investigated a little bit further  It appears that sometimes base64 encoding  at least in my case  breaks with CSS because of line breaks present in the encoded value  in my case value was generated dynamically by ActionScript     Simply using e g     img css  background-image    url      url replace    r n  n  r  gm                 works too  and even seems to be faster by a few ms than using a proxy image

User · Answer

I tried to do the same as you  but apparently the backgroundImage doesn t work with encoded data  As an alternative  I suggest to use CSS classes and the change between those classes   If you are generating the data  on the fly  you can load the CSS files dynamically   CSS    backgroundA       background-image  url  data image png base64 iVBORw0KGgoAAAANSUhEUgAAADIAAAAyCAIAAACRXR mAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyJpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw eHBhY2tldCBiZWdpbj0i77u IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8 IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuMC1jMDYwIDYxLjEzNDc3NywgMjAxMC8wMi8xMi0xNzozMjowMCAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENTNSBNYWNpbnRvc2giIHhtcE1NOkluc3RhbmNlSUQ9InhtcC5paWQ6RDUxRjY0ODgyQTkxMTFFMjk0RkU5NjI5MEVDQTI2QzUiIHhtcE1NOkRvY3VtZW50SUQ9InhtcC5kaWQ6RDUxRjY0ODkyQTkxMTFFMjk0RkU5NjI5MEVDQTI2QzUiPiA8eG1wTU06RGVyaXZlZEZyb20gc3RSZWY6aW5zdGFuY2VJRD0ieG1wLmlpZDpENTFGNjQ4NjJBOTExMUUyOTRGRTk2MjkwRUNBMjZDNSIgc3RSZWY6ZG9jdW1lbnRJRD0ieG1wLmRpZDpENTFGNjQ4NzJBOTExMUUyOTRGRTk2MjkwRUNBMjZDNSIvPiA8L3JkZjpEZXNjcmlwdGlvbj4gPC9yZGY6UkRGPiA8L3g6eG1wbWV0YT4gPD94cGFja2V0IGVuZD0iciI PuT868wAAABESURBVHja7M4xEQAwDAOxuPw5uwi6ZeigB CntJ2lkmytznwZFhYWFhYWFhYWFhYWFhYWFhYWFhYWFhYWFhYW1qsrwABYuwNkimqm3gAAAABJRU5ErkJggg          backgroundB       background-image url  data image gif base64 R0lGODlhUAAPAKIAAAsLav   88PD9WqsYmApmZmZtZfYmdakyH5BAQUAP8ALAAAAABQAA8AAAPbWLrc jDKSVe4OOvNu 9gqARDSRBHegyGMahqO4R0bQcjIQ8E4BMCQc930JluyGRmdAAcdiigMLVrApTYWy5FKM1IQe Mp L4rphz qIOBAUYeCY4p2tGrJZeH9y79mZsawFoaIRxF3JyiYxuHiMGb5KTkpFvZj4ZbYeCiXaOiKBwnxh4fnt9e3ktgZyHhrChinONs3cFAShFF2JhvCZlG5uchYNun5eedRxMAF15XEFRXgZWWdciuM8GCmdSQ84lLQfY5R14wDB5Lyon4ubwS7jx9NcV9 j5 g4JADs         HTML    lt div id  test  height  20px  class  backgroundA  gt     div test 1  lt  div gt   lt div id  test2  name  test2  height  20px  class  backgroundB  gt    div test2  lt  div gt   lt input type  button  id  btn    gt    Javascript   function change         if  document getElementById  test   className    backgroundA             document getElementById  test   className  backgroundB           document getElementById  test2   className  backgroundA         else           document getElementById  test   className  backgroundA           document getElementById  test2   className  backgroundB            btn onclick  change    I fiddled it here  press the button and it will switch the divs  backgrounds  http   jsfiddle net egorbatik fFQC6

User · Answer

I tried this  and worked for me   var img    data image png base64          place ur base64 encoded img here document body style backgroundImage    url       img           ES6 syntax  let img    data image png base64       document body style backgroundImage    url    img      A bit better  let setBackground   src   gt        this style backgroundImage    url    src         let node   nodeIGotFromDOM  img   imageBase64EncodedFromMyGF  setBackground call node  img

User · Answer

This is the correct way to make a pure call  No CSS     lt div style  background url data image png base64 iVBORw0KGgoAAAANSUhEUgAAABwAAAAFCAYAAABW1IzHAAAAHklEQVQokWNgGPaAkZHxPyMj439sYrSQo51PBgsAALa0ECF30JSdAAAAAElFTkSuQmCC repeat-x center   gt  lt  div gt

User · Answer

I think this will help  Base64 is addressed by CSS in a different way  you should set the data type of the image to base64  this will help the CSS to change the base64 to image and display it to the user  and you can use this from javascript by assigning the background image using the jquery script  it will automatically change the base64 to mage and display it   x000D   x000D  url    data image base64   data replace    r n  n  r  gm       x000D     body   css  background-image    url      url replace    r n  n  r  gm               x000D   x000D   x000D

User · Answer

Adding this trick to gabriel garcia s following solution -   var img    data image png base64          place ur base64 encoded img here document body style backgroundImage    url     img          However  in my case this wasn t working  Moving url into the img variable did the trick  SO the final code looked like this  var img    url  data image png base64    base64Data         document body style backgroundImage   img

User · Answer

In my case  it was just because I didn t set the height and width   But there is another issue   The background image could be removed using  element style backgroundImage     but couldn t be set using  element style backgroundImage  some base64 data   Jquery works fine

User · Answer

Try this  I have got success response   it s working      divId   css  background-image    url  data image png base64     base64String

[javascript] Is there a way to set background-image as a base64 encoded image?

Examples related to javascript

Examples related to base64

Examples related to background-image