Search code examples
jquerybackground-size

Change background-size with jquery

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.

Solution

  • 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.