Issue with Implementing jQuery Background Image Swapper and CSS Styling
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;
}
I am currently facing a challenge in styling a background image while using jQuery to cycle through different images. The initial CSS setup works perfectly, with the image covering the entire window as intended. However, upon implementing the jQuery swapper, the CSS styling seems to malfunction. Instead of maintaining the cover effect, the background image reverts to a fixed size. Despite this issue, the swapping functionality operates correctly. It appears that the jQuery script may be overriding the CSS properties for the html element, resulting in the loss of the cover effect. Below is an excerpt from my HTML and JavaScript code:
<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>
The concept of utilizing background image swapping was sourced from Loop thru 100 background-images onClick. I am seeking assistance in understanding why the style.css file does not seem to influence the styling of my HTML page.
Your insights and suggestions would be greatly appreciated!