Currently, I am using a CDN to incorporate Bootstrap into a school project. I have added code to load a background image and stretch it across the page. Strangely, the image loading function has suddenly stopped working. Previously, it was able to load the image without any issues, but now, it doesn't seem to work. Upon inspecting the page in Chrome's developer view under the "Sources" tab, I noticed that the image does not even appear there. The image file is located at the same directory level as my index.html file. This sudden change is puzzling as the background image used to load perfectly before this glitch occurred. I've attempted various troubleshooting steps such as pointing to a different image, hard reloading the page, and clearing the cache in developer mode, yet none of these actions have resolved the issue. In essence, no background images are being loaded anymore.
<style>
body {
background: url('bkgrnd3.jpg') no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
background-size: cover;
-o-background-size: cover;
}
</style>
<!DOCTYPE html>
<html lang="en">
<head>
<title>Grainy Travel: Plan Your Escape with 100% Humans!<\/title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
<style>
.fakeimg {
height: 200px;
background: #aaa;
}
</style>
<!--custom style for background images-->
<style>
body {
background: url('https://www.w3schools.com/images/picture.jpg') no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
background-size: cover;
-o-background-size: cover;
}
</style>
<script>
var travelImages = ["photos/DenmarkCopenhagen.jpg","photos/EiffeltopParis.jpg","photos/GoldenGateBridge.jpg"];
var descs = ["Visit a City With Fish!", "Go to the Top of the Eifel Top!", "Check out a Red Bridge Across the Water!"];
var urls = ["https://www.visitcopenhagen.com/", "https://www.toureiffel.paris/en", "https://www.goldengate.org/"];
function displayImage(index)
{
var img = document.getElementById("myImage");
img.src = travelImages[index];
}
function openWindow(url)
{
var win = open(url, "", "height=200,width=300,top=100,left=100,menubar=no");
var timer = setTimeout(function(){
win.close();
}, 3000);
}
</script>
<style>
.navbar-custom {
background-color: #20c997;
}
</style>
</head>
<body>
<!--New Bootstrapped Navbar-->
<nav class="navbar navbar-expand-sm navbar-custom navbar-light sticky-top">
<a class="navbar-brand" href="index.html"><img src="Home.png" alt="logo" style="width:30px;">Home</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#collapsibleNavbar">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="collapsibleNavbar">
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link" href="contacts.html">Agent Information</a>
</li>
<li class="nav-item">
<a class="nav-link" href="register.html">Customer Registration</a>
</li>
</ul>
</div>
</nav>
<div class="jumbotron text-center" style="margin-bottom:0">
<h1>Welcome to Grainy Travel</h1>
</div>
<article>
<!--These containers create a table from arrays of images, descriptions, and links. Onclicks open links while onmouseovers display an image below the table.-->
<div class="container"><table class="table table-dark">
<script>
for(var i=0; i < descs.length; i++)
{
document.write("<tr>");
var myString = "<td class=\"col-sm-6\"><img src='" + travelImages[i] + "' onclick='openWindow(\"" + urls[i] + "\")' /></td><td class=\"col-sm-6\">" + descs[i] + "</td>";
console.log(myString);
document.write(myString);
document.write("</tr>");
}
</script>
</table></div>
<div class="container">
<table class="table table-dark">
<script>
for(var i=0; i < descs.length; i++)
{
document.write("<tr>");
var myString = "<td class=\"col-sm-6\" onmouseover='displayImage(" + i + "); '>" + descs[i] + "</td>";
console.log(myString);
document.write(myString);
}
</script>
<td class="col-sm-6" ><img id="myImage"/>
</td>
</tr>
</table>
</div>
</article>
<div class="footer">
Copyright 2021 &copy;
</div>
</body>
</html>