-webkit-background-size doesn't work with jQuery Css
Question
I am trying to load a background after the page loads but it seems it does not work as I expect.
My code before in css was:
html {
background: url(<?php echo $this->Cdn->getUrl(); ?>/images/photos/bg-blurred.jpg) no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
background-color: #0c1d31;
}
Now I try it with jQuery:
jQuery(document).ready(function () {
jQuery('html').css({
'background-image': "url('<?php echo $this->Cdn->getUrl(); ?>/images/photos/bg-blurred.jpg')",
'background-size': "cover",
'background-color': "#0c1d31",
'-webkit-background-size': "cover",
'-moz-background-size': "cover",
'-o-background-size': "cover",
});
});
It seems the '-webkit-background-size' and '-moz-background-size' and '-o-background-size' are not working using jQuery.css. The other css properties works fine.
Any ideas please?
2 answers
solution1
1 2016-04-02 20:02:53
If you try with only "-webkit-background-size":
jQuery(document).ready(function () {
jQuery('html').css({
'-webkit-background-size': "cover"
});
});
You'll see that your element will look like this:
<html style="background-size: cover;">
So this is not your issue.
You should probably look for your url:
"url('<?php echo $this->Cdn->getUrl(); ?>/images/photos/bg-blurred.jpg')"
If you are using chrome, check in f12 inside the Network's tab, to see if there's not an error.
solution2
0 ACCPTED 2016-04-02 20:40:07
Sorry it was my mistake. I miss some code in my JS...
jQuery('html').css({
'background-image': "url('<?php echo $this->Cdn->getUrl(); ?>/images/photos/bg-blurred.jpg')",
"background-repeat": "no-repeat",
"background-position": "center center",
"background-attachment": "fixed",
'background-size': "cover",
'background-color': "#0c1d31",
'-webkit-background-size': "cover",
'-moz-background-size': "cover",
'-o-background-size': "cover",
});
Is good.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.