I know it's been a few years, but I found a good solution to this. You have them insert a normal image into a containing div, and then you use this jquery:
$(function() {
$(".header_image img").each(function(i, elem) {
var img = $(elem);
var div = $("<div />").css({
background: "url(" + img.attr("src") + ") no-repeat",
width: img.width() + "px",
height: img.height() + "px"
});
div.addClass("replacedImage");
img.replaceWith(div);
});
});
$(function() {
$(".header_info").prependTo(".replacedImage");
});
The first function takes an image that's inside of my .header_image div and applies a bunch of css styles to it to make it a background image. Then it adds the class .replacedImage to it and then it changes the img tag to a div.
After this runs, the second function puts another div inside of that replaced image div (which in my case was .header_info).
So now anytime someone uploads an image to the ".header_image" div, it will turn it into a background image and wrap that div around my header info. Hope this helps anyone in the future! Here are the sources i've found that lead me to be able to do this:
Turn image src into background image: image src to background image
How to move an element into another element:move element