CODEWITHSUNDEEP
jquerybackground-size
Keith666
Keith666

Reputation: 77

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.

Upvotes: 1

Views: 1136

Answers (2)

msinnes
msinnes

Reputation: 70

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

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

Upvotes: 1

taxicala
taxicala

Reputation: 21759

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.

Upvotes: 3

Related Questions