jquery background image styling
I'm having trouble styling a background image that I'm using jQuery to
cycle the source of. The image is inserted in the css as a background and
stretched to cover the entire window. Here's my css:
html {
background: url(images/image_1.jpg) no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
Before adding the jQuery swapper the image looks as intended. When I add
the swapper, however, the css styling fails. The cover effects seem to
drop and I'm left with a fixed-size image. The swapping works perfectly,
though. I would think the jQuery css would add to to css but it's almost
as if it's overriding all the properties for the html element and just
leaving me with the background source but no covering. Here's the script
and the html:
Here's what my html and javascript look like:
<html>
<head>
<script
src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js">
</script>
<script language="javascript">
<!--
var ctr = 0;
$(document).ready( function () {
nextBg();
});
function nextBg()
{
++ctr;
if( ctr <= 3 )
{
$("html").css( "background", "url(images/repurpose2/image_" +
ctr + ".jpg) no-repeat center center fixed" );
if( ctr == 3 )
ctr = 0;
}
}
//-->
</script>
<link rel="stylesheet" type="text/css" href=style.css>
</head>
<body>
<div class="image-swapper">
<a href="#" onclick="nextBg();" />Next</a>
</div>
</body>
</html>
I'm using the background image swapping approach I found here: Loop thru
100 background-images onClick
Can anyone tell me why I am unable to style my html with the style.css file?
Thanks very much!
No comments:
Post a Comment