Search code examples
javascripthtmlcsshrefexternal

External CSS file not loading in HTML file

I'm trying to use loading animation using jQuery. I've tried different paths for css file like 

<link href="css/animation.css" type="text/css" rel="stylesheet">

<link href="../css/animation.css" type="text/css" rel="stylesheet">

but still CSS file is not getting loaded in the html file. When I kept the CSS file in the same folder as the html file then it worked correctly.

My folder structure...

Folder structure

index.html

 <html>
 <head>
 <title>Loading Animation using jQuery</title>
 <script src="js/jquery.js"></script>
 <script src="js/jquery.backstretch.js"></script>
 <link href="css/animation.css" type="text/css" rel="stylesheet">
 </head>
 <body>
 <div id="loader">
 </div>
 <h2>Hi There</h2>
  <script>

    $(window).load(function(){
        $("#loader").delay(10000).hide(0).fadeOut("slow");
    });
  </script>
 </body>
 </html>

animation.css

   #loader{
    z-index:999999;
    display:block;
    position:fixed;
    top:0;
    left:0;
    width:100%;
    height:100%;
    background:url(images/loader.gif) 50% 50% no-repeat rgb(249,249,249); 
     }

The js files are being loaded correctly but the css file is not..Can't understand where I'm going wrong..

Solution

  • There should not be any problem with loading your CSS file,

    since the folder CSS is in the same directory level as your HTML file.

    But the image thats being used in the CSS file is one level up from your CSS file.

    Try changing 

    background:url(images/loader.gif) 50% 50% no-repeat rgb(249,249,249);

    to

    background:url(../images/loader.gif) 50% 50% no-repeat rgb(249,249,249);