'CSS background property not working with wamp64

I am trying to add a hero image to my website. I have the image ready and in my desired location, but cannot set it as a background image for the hero div. I'm using wampserver64.

I have tried using the background property shorthand, but have resorted to using background-image, background-size tags etc.

Here are the relevant parts of my code:

The links in <head>

<link rel="stylesheet" href="styles/12cols.css" type="text/css"media="screen">
<link rel="stylesheet" href="styles/styles.css" type="text/css"media="screen">

<div class="hero">
     <h1>Placeholder</h1>
</div>

CSS:

.hero {
  background-image: url("../assets/hero-image.png");
  background-position: center;
  background-size: 100% auto;
  background-repeat: no-repeat;

}

And my folder structure is as follows:

project
     -assets
          -fonts
               font.ttf (etc)
          -hero-image.png
     -styles
          -12cols.css
          -styles.css
     -index.php
     -login.php
     -signup.php

I don't get any error messages except for GET http://project/favicon.ico 404 (Not Found)

UPDATE: Tried testing as an HTML file without using wampserver, but still with no avail.

Also adding a height and width specification to make it look like this: 

.hero {
  background-image: url("../assets/hero-image.png");
  background-position: center;
  background-size: 100% auto;
  background-repeat: no-repeat;
  width: 100%;
  height: 1200px;
}

hasn't helped either.

htmlcsswampbackground-imagewampserver


Solution 1:[1]

IMG and CSS are not visible because they are in the same directory. Try deleting assets.

background-image: url("../hero-image.png");

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 Emin Mammadov

Related Questions