Change background-size with jquery

Question

I want to change the background-size of an image to the width and height a user wants.

I have a form where the user can type the correct width and height

   <input type="text" class="form-control input-width input-px" maxlength="2" name="width">PX breed
   <input type="text" class="form-control input-height input-px" maxlength="2" name="height">PX hoog

and if the input changes I want to change the background-size to the value of the input field

      $(".input-px").on("change", function()
      {

          width = $(".input-width").val()+"px";
          height = $(".input-height").val()+"px"

          $(".source").css("background-size", width + height );

      })

I don't get any error but it doesn't change the width/height either.

Answer 1

I believe you should do as follows:

$(".source").css("background-size", width + ', ' + height );

The way you are doing it, you are doing a sum of width and height, in css, background size takes 2 numbers separated by a comma.

Answer 2

I think you're missing a space in the background-size text input.

$(".source").css("background-size", width + " " + height );