Setting .css() Multiple Properties not working

Question

I am trying to zoom in to portion of an image by changing the div background image property. I am not sure if this is the proper way but so far it works! the only problem is passing the Multiple Properties through .css(). the properties working when I call them separately but not not together! Can you please let me know why this code is not working?

$(document).ready(function () {
    $(".zoom").click(function () {
        $('.gal').css({
            background-size: "200% 200%",
            background-position: "center"
        });
    });
});

Is there any better idea to create a Google Map style image zoom in? Thansk

Denys Séguret · Accepted Answer · 2013-06-14 17:16:44Z

4

Change

$('.gal').css({
  background-size: "200% 200%",
  background-position : "center"
});

to the DOM property notation :

$('.gal').css({
  backgroundSize: "200% 200%",
  backgroundPosition : "center"
});

or add quotes around the CSS property names :

$('.gal').css({
  'background-size': "200% 200%",
  'background-position' : "center"
});

See documentation :

Also, jQuery can equally interpret the CSS and DOM formatting of multiple-word properties. For example, jQuery understands and returns the correct value for both .css({'background-color': '#ffe', 'border-left': '5px solid #ccc'}) and .css({backgroundColor: '#ffe', borderLeft: '5px solid #ccc'}). Notice that with the DOM notation, quotation marks around the property names are optional, but with CSS notation they're required due to the hyphen in the name.

answered Jun 14, 2013 at 17:16

Denys Séguret

384k90 gold badges813 silver badges780 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Setting .css() Multiple Properties not working

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related