I'm currently developing a multi-page application where I load mainpage.html into index.html using tag. I need to have a different background image for each HTML page, such as mainpage, page1, page2, etc. Can anyone help me with this?
index.html
<html>
<head>
<meta charset="UTF-8">
<title>wsdl Demo</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=0">
<link rel="stylesheet" href="css/main.css">
<script>window.$ = window.jQuery = WLJQ;</script>
</head>
<body style="display: none;">
<!-- This is static header, it will be shown always -->
<div id="header">
<h1>WS DEMO</h1>
</div>
<div id="wrapper">
<!-- This is a placeholder for dynamic page content -->
<div id="pagePort"></div>
</div>
<script src="js/initOptions.js"></script>
<script src="js/main.js"></script>
<script src="js/messages.js"></script>
</body>
</html>
function wlCommonInit(){
busyIndicator = new WL.BusyIndicator();
// Special case for Windows Phone 8 only.
if (WL.Client.getEnvironment() == WL.Environment.WINDOWS_PHONE_8) {
path = "/www/default/";
}
$("#pagePort").load(path + "pages/MainPage.html", function(){
$.getScript(path + "js/MainPage.js", function() {
if (currentPage.init) {
currentPage.init();
}
});
});
}body{
background: red;
}
<!-- begin snippet: js hide: false -->//mainpage.html
<script>
$.getScript(path + "js/MainPage.js");
</script>
<p id="currentPage"></p>
<div class="container">
<label>username</label> <input type="text" id="username"><br><br>
<label>password</label> <input type="text" id="userpwd"><br><br>
<input type="submit" value="login" class="appButton" onclick="validate();">
</div>
<p id="mytable"></p>