0

enter image description here

My image isn't showing in the browser please help me. My html document is preety stright forward but the image is not showing. I have placed the image inside a folder named image. I have tried same code in another folder it worked but in this particular folder it isn't showing anything. what should i do.

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  text-decoration: none;
}

body {
  background-image: url("https://via.placeholder.com/150");
  background-position: center;
  background-size: auto;
  background-repeat: no-repeat;
}

.logopic {
  width: 4em;
}

#container {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 80%;
  margin: 15px auto;
}

.list-item-ul {
  list-style: none;
  margin: 0em 2em 0em 0em;
}

.list-item-li {
  text-decoration: none;
  display: inline-block;
  background: rgb(186, 178, 117);
  padding: 0.20em 0.50em 0.20em 0.50em;
  margin: 0em 1em 0em 1em;
}

li a {
  color: white;
}
<!DOCTYPE html>
<html>

<head>
  <title>
    Responsive Web Three
  </title>
  <link rel="icon" type="image/png" href="image/logo.png">
  <link rel="stylesheet" type="text/css" href="css/style.css">
</head>

<body>
  <header id = "container" id="topheader">
    <img src="https://via.placeholder.com/150" alt="logo" class="logopic">
    <nav class="list-item-nav">
      <ul class="list-item-ul">
        <li class="list-item-li"><a href="">home</a></li>
        <li class="list-item-li"><a href="">About us</a></li>
        <li class="list-item-li"><a href="">Services</a></li>
        <li class="list-item-li"><a href="">Portofolio</a></li>
      </ul>
    </nav>
  </header>

</body>

</html>
Simone Rossaini
  • 8,115
  • 1
  • 13
  • 34
Najup
  • 23
  • 5
  • 1
    I removed the `
    ` and added `url(https://www.technocrazed.com/wp-content/uploads/2015/12/beautiful-wallpaper-download-14.jpg)` instead of your `url("image/background.jpg");` and the image shows.
     – mplungjan Jun 30 '20 at 12:49
  • Open the browser's debugging tools, specifically the network tab, and reload the page (Ctrl-F5). Is a network request made for `background.jpg`? What is the URL of that request? What is the server's response? – David Jun 30 '20 at 12:49
  • Please update the snippet I made you with relevant HTML. It could be that your container hides the image – mplungjan Jun 30 '20 at 12:51
  • Use `html, body { height: 100%; }` and give your main container (child of body) a `min-height: 100%;` – bron Jun 30 '20 at 12:56
  • it works when i add image through external server links but it wont work locally, logo image is working perfectly which i added from same folder using html background color is also showing. – Najup Jun 30 '20 at 13:00
  • Then your image is not in the folder or the folder does not have the correct permission. Folder should be `public_html/image/background.jpg` where your home page is in `public_html` or whatever your ISP call it – mplungjan Jun 30 '20 at 13:03
  • please see this image i'm unable to add image here the image is screenshot of folder order in atom https://www.facebook.com/photo.php?fbid=314263929732807&set=a.314264086399458&type=3&theater – Najup Jun 30 '20 at 13:10
  • Your post says `background.jpg`, your screenshot says `websitebg.jpg` – mplungjan Jun 30 '20 at 13:12
  • I've changed it though no problem with name as you see in the link – Najup Jun 30 '20 at 13:13
  • So add HTML to the snippet. Click edit, then scroll down and click edit above snippet and add relevant HTML. Does the network tab when you press F12 show that the image is loading correctly? – mplungjan Jun 30 '20 at 13:14
  • yeah its loading correctly – Najup Jun 30 '20 at 13:16
  • I've also added html code – Najup Jun 30 '20 at 13:18
  • image is on the wrong path, you should put inside `background-image: url(../image/logo.png)` – Evandro Cavalcate Santos Jun 30 '20 at 13:21
  • i think we can't reproduce your problem, because the code is correct. – Simone Rossaini Jun 30 '20 at 13:22
  • Thank you it worked but i didn't get it i mean why we need to put ../ – Najup Jun 30 '20 at 13:22
  • @Najup because you are using absolute path, it's required to point to the absolute file path and also image and css are in different folders, you have to step back to root to access other folders – Evandro Cavalcate Santos Jun 30 '20 at 13:25
  • can you suggest any tutorials or any document or any website to learn these things – Najup Jun 30 '20 at 13:26
  • @Najup I would say using ctrl+space in atom/vs code would help a lot since it's autocomplete, but at the same time you can try freecodecamp, I guess they have this kind of explanation – Evandro Cavalcate Santos Jun 30 '20 at 13:27
  • Thank you very much @EvandroCavalcateSantos and to all – Najup Jun 30 '20 at 13:28
  • @Najup The reason for your issue is not explained clearly. If the stylesheet was INLINE, your code would work because your image folder is UNDER the index.html folder. BUT because you out the css in a css folder as a sibling to the image folder, you need to navigate one up before going back down into image – mplungjan Jun 30 '20 at 13:29
  • Thanks @mplungjan but where can i learn these things in details. please give a idea – Najup Jun 30 '20 at 13:32
  • to solve this issue understand absolute file path and relative file path – Najup Jun 30 '20 at 13:42

1 Answers1

-2

Try changing <link rel="icon" type="image/png" href="image/logo.png">

to <link rel="icon" type="image/png" href="logo.png">

Nono5000
  • 60
  • 1
  • 9