I'm struggling to display a background image on my HTML page. The image is saved in the same folder as the HTML file.
<html>
<head>
<link rel="stylesheet" type="text/css" href="style/indexstyle.css" >
<meta charset="ISO-8859-1">
<title>Insert title here</title>
</head>
<body>
<heading>Overground Effective</heading>
<nav class="nav">
<ul>
<li><a href="index.html" style="color: black;">Home</a></li>
<li><a >About me</a>
<ul>
<li><a href="aboutme/whoami.html">Who am I</a></li>
<li><a href="aboutme/whatido.html">What I do</a></li>
<li><a href="aboutme/whatilike.html">What I like</a></li>
</ul></li>
<li><a href="aboutme/myskills.html">My skills</a></li>
<li><a href="gallery/gallery.html" style="color: black;">Gallery</a></li>
</ul>
</div>
</nav>
</div>
and the CSS file:
body{
background-image: url("/treewithroots.jpg");
background-size: cover;
min-height: 100%;
background-position: right;
}
Interestingly, when I upload the image to Dropbox, it works perfectly. How can I resolve this issue?