I recently started working on an asp.net application and decided to integrate a pre-made bootstrap template for the frontend. After some searching, I came across this one. The original site showcasing the template looked really appealing with a background like this:
https://i.sstatic.net/Fge8W.jpg
After copying all the CSS into my project's folder and tweaking the HTML to suit my needs, my _layout.cshtml now resembles the following structure:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />
...
</script>
<!-- Core theme CSS (includes Bootstrap)-->
<link href="css/styles.css" rel="stylesheet" />
</head>
<body>
<!-- Navigation-->
<nav class="navbar navbar-expand-lg navbar-light" id="mainNav">
<div class="container px-4 px-lg-5">
...
</footer>
<!-- Bootstrap core JS-->
<script src="https://cdn.jsdelivr.net/npm/...
On inspecting further, I found that the crucial line responsible for setting the background image is:
<header class="masthead" style="background-image: url('../../wwwroot/assets/home-bg.jpg')">
This line specifies the image used as the background.
However, when I view my site, it appears differently from what I expected: https://i.sstatic.net/y4GVY.png
The background image doesn't display properly, only showing a gray color instead of the intended design. I want the image to be visible as in the provided source link.
EDIT:
After examining the dev tools, I discovered the issue: https://i.sstatic.net/gUzDv.png
Clicking on the image leads me to a page saying '
This localhost page can’t be foundIt seems like there might be an error in the path specified. This is puzzling because my IDE recommended the path. How do I correct the path so that the image displays correctly?