Within my HTML document, I included the following code:
<link href ="project.css" rel ="stylesheet">
<style>
body, html {
height: 100%;
margin: 0;
}
</style>
<title>Page1</title>
</head>
<body>
<div class="bg"></div>
</body>
In regards to my CSS file, this is what I had written:
.bg {
/* The image used is edited from original World Table Tennis logo */
background-image: url("WTT.jpeg");
/* Full height */
height: 100%;
/* Center and scale the image nicely */
background-position: center;
background-repeat: no-repeat;
background-size: cover;
}
However, I encountered an issue trying to display an image uploaded to my VS Code in the browser. This led me to use CSS for styling instead. Upon running Flask, I received a
GET /project.css HTTP/1.0" 404Initially, I included my.bg in my HTML page, but faced a GET /WTT.jpeg HTTP/1.1" 404 error. To troubleshoot, I moved it to the CSS file. As I haven't practiced coding in a while, especially with images, I'm feeling a bit lost.
Here is a snapshot of my file structure for reference.