CSS style file doesn't link with main page-CodePudding

I'm working with a template and everything went smooth, until I tried to change main banner image with another image in style.css file. However, if I set style directly to the banner class in index.php it works.

Moreover, if I delete the whole banner-section in style.css it still works perfectly, as if I haven't deleted anything. I'm not sure anymore what I'm missing here, never had any problems linking CSS files.

Not working:

index.php

<?php 
session_start();
include('includes/config.php');
error_reporting(0);

?>

<!DOCTYPE HTML>
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width,initial-scale=1">
<meta name="keywords" content="">
<meta name="description" content="">
<title>Car Rental Portal</title>
<!--Bootstrap -->
<link rel="stylesheet" href="assets/css/bootstrap.min.css" type="text/css">
<link rel="stylesheet" href="assets/css/style.css" type="text/css">
<link rel="stylesheet" href="assets/css/owl.carousel.css" type="text/css">
<link rel="stylesheet" href="assets/css/owl.transitions.css" type="text/css">
<link href="assets/css/slick.css" rel="stylesheet">
<link href="assets/css/bootstrap-slider.min.css" rel="stylesheet">
<link href="assets/css/font-awesome.min.css" rel="stylesheet">
<link rel="apple-touch-icon-precomposed" sizes="144x144" href="assets/images/favicon-icon/apple-touch-icon-144-precomposed.png">
<link rel="apple-touch-icon-precomposed" sizes="114x114" href="assets/images/favicon-icon/apple-touch-icon-114-precomposed.html">
<link rel="apple-touch-icon-precomposed" sizes="72x72" href="assets/images/favicon-icon/apple-touch-icon-72-precomposed.png">
<link rel="apple-touch-icon-precomposed" href="assets/images/favicon-icon/apple-touch-icon-57-precomposed.png">
<link rel="shortcut icon" href="assets/images/favicon-icon/favicon.png">
<link href="https://fonts.googleapis.com/css?family=Lato:300,400,700,900" rel="stylesheet"> 
</head>
<body>
        
<!--Header-->
<?php include('includes/header.php');?>
<!-- /Header --> 

<!-- Banners -->
<section id="banner" class="banner-section">
  <div class="container">
    <div class="div_zindex">
      <div class="row">
        <div class="col-md-5 col-md-push-7">
          <div class="banner_content">
            <h1>POIŠČITE PRAVI AVTO ZA VAS.</h1>
            <p>Prebrskajte med raznoliko izbiro avtomobilov. </p>
            <a href="#" class="btn">Preberi Več <span class="angle_arrow"><i class="fa fa-angle-right" aria-hidden="true"></i></span></a> </div>
        </div>
      </div>
    </div>
  </div>
</section>
<!-- /Banners -->

style.css

/*-------------------------
    3.1. Banner
-------------------------------*/
.banner-section {
  background-image: url("assets/images/volvobanner.jpg");
  background-position: center center;
  background-repeat: no-repeat;
  background-size: cover;
  padding: 160px 0;
  position: relative;
}
...

Working (directly setting style in banner section):

<!-- Banners -->
<section id="banner" class="banner-section" style="background-image:url(assets/images/volvobanner.jpg)">
  <div class="container">
    <div class="div_zindex">
      <div class="row">
        <div class="col-md-5 col-md-push-7">
          <div class="banner_content">
            <h1>POIŠČITE PRAVI AVTO ZA VAS.</h1>
            <p>Prebrskajte med raznoliko izbiro avtomobilov. </p>
            <a href="#" class="btn">Preberi Več <span class="angle_arrow"><i class="fa fa-angle-right" aria-hidden="true"></i></span></a> </div>
        </div>
      </div>
    </div>
  </div>
</section>
<!-- /Banners -->

CodePudding user response：

When you specify the file location of the background image, it is relative to the folder the CSS is executed in. The CSS file is located in /assets/css/, so...

It's looking for /assets/css/assets/images/volvobanner.jpg which likely does not exist. You would have caught this if you looked in the Network tab of the Developer Tools in your browser. ;)

Solution: correct the file location. You are already in /assets/css as the file is being read, so you could just change your file's location to: ../images/volvobanner.jpg in the background-image attribute. The reference to the file's location should match the relative folder they're in.

Or, configure the absolute path: /assets/images/volvobanner.jpg

CodePudding user response：

Assuming your paths are correct, this might just be a case of aggressive browser cacheing. I found this happens a lot in a few PHP frameworks.

Fix? Run your site incognito and see if the changes took effect.

Also depending on the framework you're using, there are different commands to clear server cache. Symfony for example you can run php bin/console cache:clear. Laravel, you can run php artisan optimize, Pimcore you can delete cache using symfony method but also using the admin panel under the settings gear, etc...

I do agree with dmanexe's answer though, you are using the path incorrectly for the background-image property in the css.

CodePudding user response：

css in firefox and ie is rendering old css file...chrome shows new css just fine

SOLUTION:

I found this post right now and tried clearing my cache with ctrl shift del and it worked.