Question 45345 in Html Question posted in
Some basic documentation can be found here.

HTML site not showing certain elements when not using live server

When i use the live server in VS Code everything works as expected, however when I open the site via files it doesn’t show certain elements. I’ve noticed that it’s the ones that require linking to other files. For example @font-face and background-image: url()

I’ve tried restarting my PC thinking that it just didn’t load or something but that wasn’t the case. The files and paths are structured correctly since it works in live server mode so I doubt that that’s the problem

Heres parts of code that are most likely problematic and screenshots of file vs. live server

@font-face {
    font-family: Raleway;
    src: url(/fonts/Raleway-Medium.ttf);
  }
main{
    background-image: url('/img/pozadina.png');
    background-repeat: no-repeat;
    background-position: center;
}

Live server
HTML file

Tags:

2

Answers


  1. Chosen as BEST ANSWER
    0

    I found the solution, instead of adding one dot i had to add two. Now it works for both, browser file protocol and live server.

    @font-face {
  font-family: Raleway;
  src: url(../fonts/Raleway-Medium.ttf);
}
main{
  background-image: url('../img/pozadina.png');
  background-repeat: no-repeat;
  background-position: center;
}


  2. 0

    Try to add dots (.) before folders in path

    @font-face {
  font-family: Raleway;
  src: url(./fonts/Raleway-Medium.ttf);
}
main{
  background-image: url('./img/pozadina.png');
  background-repeat: no-repeat;
  background-position: center;
}
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search