HTML and CSS Issue
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<link rel="stylesheet" href="/css/style.css">
</head>
<body>
<section>
<h1>Hello, world! (index.html)</h1>
<input id="userName" type="text" name="" placeholder="Enter Name">
<button id="clickMe" type="button" name="button">Click Me</button>
<h2 id="personName"></h2>
<h2 id="personStatus"></h2>
<h2 id="personOccupation"></h2>
<script type="text/javascript" src="/js/main.js"></script>
</section>
</body>
</html>
CSS Styling
h1{
color: red;
}
section {
background-image: url("../coinflip.jpg");
background-size: cover;
}
Recent Troubleshooting
https://i.sstatic.net/z90We.png
After trying various URL formats for the image:
background-image: url(../coinflip.jpg);
background-image: url(/coinflip.jpg);
background-image: url("/coinflip.jpg");
Issue Identification
It seems like the image is not displaying properly on the webpage.
Possible Cause
I suspect that there may be an issue related to Node.js integration as it's my first time working with it. Could it be because of my server.js file?
In the server.js file, here is a part of the code:
switch (page) {
case '/css/style.css':
fs.readFile('css/style.css', function(err, data) {
res.write(data);
res.end();
});
break;
Most pathnames work fine with this switch case but I am uncertain why the CSS styling is affected in this case. Any insights would be appreciated.