I am having trouble using a local image as the background image for a section of my website. Even after entering the image URL and running the project, nothing is appearing. As a beginner in CSS and HTML, I would greatly appreciate any help or advice on how to solve this issue.
Here is the code for the HTML file:
<body>
<header>
<h1 class="logo">JN</h1>
<nav>
<ul>
<li><a href="#about">About</a></li>
<li><a href="#youtube">YouTube</a></li>
<li><a href="#articles">Articles</a></li>
<li><a href="#vine">Vine</a></li>
<li><a href="#social">Social</a></li>
<li><a href="#podcasts">Podcasts</a></li>
<li><a href="#share">Share</a></li>
<li><a href="#more">More</a></li>
</ul>
</nav>
<a href="mailto:<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="8efae6e7fde3efe7e2e7fde8e1fcfcefe0eae1e3fdfafbe8e8fdcee9e3efe7e2a0ede1e3">[email protected]</a>">Email me</a>
</header>
</body>
Below is the CSS code:
h1.logo {
visibility: hidden;
background-image: url(JN-website-logo-Transparent-background.svg);
background-repeat: no-repeat;
background-position: center;
background-size: contain;
}
The path to the CSS file on my computer is:
/Users/justin/Desktop/JN website/JN/public_html/CssAbout.cssThe image path on my computer is:
/Users/justin/Desktop/JN website/JN/Image/JN-website-logo-Transparent-background.svg