KeyStroke KeyStroke - 1 month ago 4
CSS Question

Not able to change height and width of image using javascript

Hey I am trying to change the height and width of image which I read from the input and trying to display it back, this the code:

function readanddisplayImage(input){
if(input.files && input.files[0]){
var filereader = new FileReader();
filereader.onload = function(reader){
var image = new Image();
image.src =;
image.width = 150;
image.height = 150;
//It works fine till this line but in the next line image is displayed without the size changed.
$("#profilePicture").css("background-image", "url('" + image.src + "')");
alert(image.width +" "+ image.height);

Can someone please tell me where I am going wrong?? ThankYou.


changing the image width and height like that wont effect the image when used as a CSS background ... try changing the backgound image dimensions using CSS

 filereader.onload = function(reader){
        $("#profilePicture").css("background-image", "url('" + + "')").css("background-size", "150px 150px");