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 -->