Background As Color And Background As Image

I know this question is a bit lengthy, but all of it is related so I am putting them here.I am trying this since past 2 days and i am very close of getting a solution.But somethin

Solution 1:

You need this style for it to work:

#result {
    height: 300px;
    width: 100%;
}

You also need to add query:

<scriptsrc="http://code.jquery.com/jquery-1.11.0.min.js"></script>

Solution 2:

For your first problem..

I didn't dig why exactly your fiddle had an error of 'readURL' is undefined but since you used jquery, I attached the event and called it with jquery and now it works:

$(function () {
    $("#files").on('change', readURL);
});

//Check File API supportfunctionreadURL() {
    var input = this;
    if (input.files && input.files[0]) {
        var reader = newFileReader();
        reader.onload = (function (tFile) {
            returnfunction (evt) {
                //$('#img').attr('src', evt.target.result);

                $('#result').css({ 'background-image': 'url(' + evt.target.result + ')', 'background-size': '200px 200px', 'background-repeat': 'no-repeat', 'background-position': 'center' })
            };
        }(input.files[0]));
        reader.readAsDataURL(input.files[0]);
    }
}

working demo