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 -->
>Solution :
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.