CODEWITHSUNDEEP
jquerycss
Light
Light

Reputation: 1677

Remove CSS3 background-size with jQuery

I am using jQuery to set a background image to stretch inside a div by using $("#container").css("background-size", "100% 100%").

It works great, but then on a click of a button I want to remove the property and reset the background size to it's default state, so I am using $("#container").removeAttr("background-size");, and it doesn't work... nothing changes.

Any help will be appreciated.

Upvotes: 0

Views: 2098

Answers (4)

NamingException
NamingException

Reputation: 2404

.removeAttr( attributeName ) just removes an attribute from each element in the set of matched elements. So you should reset your CSS by .css('background-size', '')

Upvotes: 4

vher2
vher2

Reputation: 990

You can make a class instead of an inline style:

.background-size { background-size:'100% 100%' }

In then this:

$("#container").addClass("background-size");

And then when you want to remove it:

$("#container").removeClass("background-size");

Upvotes: 0

kaisk23
kaisk23

Reputation: 409

removeAttr() is for removing HTML attributes, not CSS styles.

You can just use the same jQuery script you're using to set the background size to auto.

$("#container").css("background-size", "auto")

Upvotes: 0

PSL
PSL

Reputation: 123739

Try this. removeAttr removes an attribute of the element not of the css.

  $("#container").css('background-size', '')

Upvotes: 4

Related Questions