CODEWITHSUNDEEP
jquerycssjquery-1.9
Run
Run

Reputation: 57176

Change the background image size with jquery for webkit

I want to change the background size with jquery. But it does not seem to work on safari and chrome.

$(".item").css({
    "background-size": 1046 * ratio,
    "-webkit-background-size": 1046 * ratio + " auto",
});

the original background size is 1046px X 200px

Any ideas?

Upvotes: 0

Views: 983

Answers (1)

Brewal
Brewal

Reputation: 8189

You are missing px after your x value. If you leave it, you will have a css property like
-webkit-background-size: 524 auto which is wrong. Here is the corrected code : 

$("body").css({
    "background-size": 1046 * ratio,
    "-webkit-background-size": 1046 * ratio+'px auto',
});

See this Fiddle : http://jsfiddle.net/PZXvz/1/

What's strange is that the browser should fallback to the background-size property. Make sure you execute this on DOM ready :

$(document).ready(function(){/* your code */});

Upvotes: 5

Related Questions