Kyle Kyle - 6 months ago 13
CSS Question

Banner image doesn't display after directory change

I have a banner header that display's its banner image when in the main directory of the site but once I move the HTML file to a sub folder and update all the links to reflect the folder change the banner image no longer displays. In all of my code editors, the path to the image is set correctly. Below you will find the code in my header and also the section of code that isn't working properly. top-banner.jpg is the question at hand here. All other images on the page work and are in the same directory as the banner image. Any suggestions would be greatly appreciated.

<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Products</title>
<meta name="description" content="">
<link href="../css/bootstrap.min.css" rel="stylesheet">
<link href="../css/font-awesome.css" rel="stylesheet">
<link href="../css/flaticon.css" rel="stylesheet">
<link href="../css/fopen-sans.css" rel="stylesheet">
<link href="../css/raleway-webfont.css" rel="stylesheet">
<link href="../css/lato.css" rel="stylesheet">
<link href="../css/idangerous.swiper.css" rel="stylesheet">
<link href="../css/magnific-popup.css" rel="stylesheet">
<link href="../img/favicon.ico" rel="shortcut icon">
<link href="../css/style.css" rel="stylesheet">
<link href="../css/responsive.css" rel="stylesheet">
</head>



<div class="wpc-top-header overlay img-bg">
<img src="../img/top-banner.jpg" alt="banner" class="hidden">
<div class="container-fluid">
<div class="row">
<div class="col-sm-12">
<div class="wrapper">
<div class="heading">Our Products</div>
<div class="subheding">
<a href="index.html" class="link">home</a><span class="round"></span>
<a href="#" class="link">pages</a><span class="round"></span>
<a href="about.html" class="link active">Our Products</a>
</div>
</div>
</div>
</div>
</div>
</div>

Answer

remove class="hidden" in <img src="../img/top-banner.jpg" alt="banner" class="hidden">


Edit: As can be seen from the provided links, the file /htmltest/js/scripts.js contains:

/*-------------------------*/ 
/*  ADD BACKGROUND IMAGE   */ 
/*-------------------------*/


$(".img-bg").each(function(){
    $(this).css("background-image", "url("+$(this).find("img").attr('src')+")");
});

However, the path js/scripts.js is not updated to ../js/scripts.js, and this script is not executed. So just replace all js/into ../js/ in the HTML file.