0

I'm trying to make a laser tag game to share with my friends. And I want them to be able to choose an avatar for the game. I want it to be like a silhouette of the avatar, that changes into the actual avatar when you hover. However, the CSS background: url property doesn't work. Instead, nothing loads. When I right-click and select the 'Inspect' option, it says that there are 2 errors (one for each avatar) saying that the path is wrong even though I have checked and checked again. Why?

body{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    background-color: black;
}

.avatars{
    justify-content: center;
    margin-left: 20%;
}

.female-av{
    background: url("//img/female-avatar-silhouette.png") no-repeat;
}

.male-av{
    background: url('//img/male-avatar-silhouette.png') no-repeat;
}

<!DOCTYPE html>
<html lang="en" dir="ltr">
    <head>
        <meta charset="utf-8">
        <title>Choose Your Character</title>
        <link rel="stylesheet" href="css/avatar-page.css">
    </head>
    <body>
        <div class="avatars">
            <div class="female-av"></div>
            <div class="male-av"></div>
        </div>
    </body>
</html>

Any help is greatly appreciated!

Sianna Zewdie
  • 89
  • 17
  • 2
    Is the image path defiantly correct and loading? Also, is there anything that's setting the size of those divs? (It looks like they would be 0 height at the moment, so the background will not be visible) – DBS Oct 01 '20 at 13:14
  • no the image is not loading. thats the problem – Sianna Zewdie Oct 01 '20 at 13:16
  • i edited the question to make it clearer – Sianna Zewdie Oct 01 '20 at 13:20
  • Remove the first forward slash in each URL, for one – TylerH Oct 01 '20 at 13:22
  • Is the path you have (minus the double slash part) relative to the CSS file? It's a fairly common mistake to make it relative to the HTML file or the root of the site. – DBS Oct 01 '20 at 13:24

2 Answers2

2

a little bit of clarity on how path works in your situation:

//img/female-avatar-silhouette.png

is a relative path that will use the same protocol as the page. So this will resolve to https://img/female-avatar-silhouette.png that is not a valid path.

/img/female-avatar-silhouette.png

is an absolute path. It means that, no matter where the page you are opening is in your site tree, it will look for a folder named img in the root and will open it.

img/female-avatar-silhouette.png

is relative to where the page is and means that you have a folder below the one the page is in named img

../img/female-avatar-silhouette.png

is again relative but the folder is above the one where the page is. you can have as many ../ as you need to go up levels.

Depending on your site structure you will have to build your url with this in mind

Lelio Faieta
  • 6,457
  • 7
  • 40
  • 74
1

The path is wrong.

Starting a URL with a // denotes that it is a relative URL that should preserve the same URL scheme (e.g. http:// or https://) while changing the hostname.

While img is technically a valid hostname, it is very unlikely that you have a server named that on your LAN, and it isn't a public hostname:

[ ~ ] ➜  host img
Host img not found: 3(NXDOMAIN)
Quentin
  • 914,110
  • 126
  • 1,211
  • 1,335