Missing images in an html file - css

Question

The following HTML code:
<div class="main-container">
<div id="top-section-main">
<div id="top-section-content">
<h1>Awesome looks so good</h1>
<p>Awesome is the landing page you wish you had when you started</p>
<p class="playBTN"><img src="Images/9.1 Play.png" height="120px" width="120px"></p>
<div class="main-form">
<form>
<h6>SIGN UP FOR A FREE 30 DAY TRIAL</h6>
<input type="text" name="name" placeholder="Name">
<input type="email" name="email" placeholder="Email">
<button style="trial" type="submit" value="submit">Start Free Trial</button>
</form>
</div>
</div>
</div>
</div>
And it's corresponding CSS:
#top-section-main{
background-image: url(/Images/6.1\ Friends.jpg);
height: 740px;
border: none;
}
#top-section-content{
width: 60%;
margin-left: auto;
margin-right: auto;
margin-top: 0;
}
#top-section-content h1{
font-size: 4em;
font-weight: 300;
color: #ffffff;
text-align: center;
margin: 0;
padding-top: 100px;
}
#top-section-content p{
font-size: 1.3em;
font-weight: 400;
color: #ffffff;
text-align: center;
margin-top: 10px;
}
.playBTN{
text-align: center;
margin: auto;
padding: 50px 0 100px 0;
}
.main-form h6{
font-family: sans-serif;
font-size: 0.9em;
font-weight: 100;
color: #ffffff;
text-align: center;
}
.main-form input{
width: 30%;
margin: 0;
height: 40px;
font-family: sans-serif;
font-size: 15px;
padding-left: 15px;
font-weight: 100;
border: none;
}
.main-form button{
width: 30%;
height: 42px;
font-family: sans-serif;
font-size: 15px;
padding-left: 15px;
font-weight: 100;
background-color: #6dc77a;
color: #ffffff;
border: none;
}
This is a problem regarding a static webpage that I created. When this is launched via the IDE itself (VScode), there is no issue and every image is being displayed. But when I open the html file separately from the folder, few images are missing. I've checked the path of the pictures and it looks good (note - all the images are present within the folder) . Any idea on what may have gone wrong?

Answer 1

few images are missing
Which ones are displayed and which ones are missing? Please be more specific when reporting a bug.
Where's your stylesheet relative to your HTML page? No <link> in your code so wWe don't have that information.
(I don't know how VSCode differs from a regular browser) Assuming the img element in your HTML code is displayed, your background-image should looks like background-image: url("/Images/6.1 Friends.jpg");. Try removing the trailing slash if it still doesn't display.
If your stylesheet isn't in the same directory than your markup, then you still may have a problem: that trailing slash s the root of your files which is a known location with a webserver (protocol http(s):// in your browser) but is the root of the filesystem of your OS with file:/// protocol.
More general note: when relative, path of CSS ressources is relative to the location of that CSS, not relative to your HTML page.
OT: alt attribute is mandatory for <img> elements. It should be alt="" for decorative images and alt="something meaningful" for images bringing information (see WAI tutorial for more information)