HTML 5 File load image as background-image

Question

is it possible to load an image via the HTML 5 File API and make it a css background-image using javascript / jquery? If it's possible, how is it done?

Answer 1

dronus gave me a great answer to this question by posting this link in the comment section: sveinbjorn.org/dataurls_css

You simple have to do the following to use the image data for a css background image: This will save the src data of your image after you create a new and fill and fill it with data using the FileReader()

var imgFileData = $('#image').attr('src') 

Now you simply have to take this var and set it as the background-image url

$('#yourDiv).css({'background-image':'url(' + imgFileData + ')'});
$('#image').hide(); //optional

Read the link to get a better understanding what is happening here, and thanks again to dronus