I encountered an issue with different background images needed for each page, where the ID is generated from the following for loop statement:
`$`function nextButton() {
if(curNum<numScreens) {
curNum = parseInt(curNum)+1;
document.location.href = '#'+curNum;
$( init );
}
}
This results in /#1, /#2, and /#3 pages.
To address this, I attempted to assign unique IDs/classes for each page in the HTML document like so:
<body id="1">
<body id="2">
<body id="3">
And then in the CSS:
body.1 {
background-image: url("bg.gif");
background-repeat: no-repeat;
background-attachment: scroll;
background-position: 53% 10%;
z-index: 1;
}
body.2 {
background-image: url("bg1.gif");
background-repeat: no-repeat;
background-attachment: scroll;
background-position: 53% 10%;
z-index: 1;}
body.3 {
background-image: url("bg2.gif");
background-repeat: no-repeat;
background-attachment: scroll;
background-position: 53% 10%;
z-index: 1;
}
However, this approach did not yield the desired result. Can someone please assist me?