13

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?

Maximilian Lindsey
  • 809
  • 4
  • 18
  • 35
  • 8
    Maybe convert the loaded data to a data uri. That can be used as background-image URL. See examples here: http://sveinbjorn.org/dataurls_css – dronus Dec 21 '11 at 16:13
  • That really helped! Thanks a lot. I will post how I did it as soon as possible, but thanks to reputation restrictions I can't do it for the next 5 houres – Maximilian Lindsey Dec 21 '11 at 17:08

1 Answers1

6

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

Maximilian Lindsey
  • 809
  • 4
  • 18
  • 35