In #10 we animate the image from the content to the editor by creating an <img> element and animating it off the screen. It's assumed that this element will precisely superimpose the one that the user is looking at, but this isn't necessarily the case with background images, which may be cropped or other things through all the fancy background-* CSS properties. This means that the animation may be a bit disorienting.
However, there's more... once the image gets to the sidebar, none of those background properties are applied either, so if the background image was actually a very specific part of a spritesheet, the entire spritesheet gets added to the canvas.
The solution here might actually be to simply make all images in the editor be represented using CSS background properties, which satisfies the standard <img> use-case as well as these more funkalicious ones.
In #10 we animate the image from the content to the editor by creating an
<img>element and animating it off the screen. It's assumed that this element will precisely superimpose the one that the user is looking at, but this isn't necessarily the case with background images, which may be cropped or other things through all the fancybackground-*CSS properties. This means that the animation may be a bit disorienting.However, there's more... once the image gets to the sidebar, none of those background properties are applied either, so if the background image was actually a very specific part of a spritesheet, the entire spritesheet gets added to the canvas.
The solution here might actually be to simply make all images in the editor be represented using CSS background properties, which satisfies the standard
<img>use-case as well as these more funkalicious ones.