having issue with background-image not showing

Question

My background-image isn't showing and its driving me crazy as I know it's something easy.

The div class below is where I'm trying to get the background to show.

.sun-face{
    background-image: url("./images/Sun_face.svg");
}


<div class="sun-face"></div>

My file directory is structured like so.

ROOT
    -css
    -fonts
    -images
    -js
    index.html
    navbar.html
    signin.html

Answer 1

use this css

.sun-face{
background-image: url("../images/Sun_face.svg");
height:500px;
}

Answer 2

I've had this problem before and it was caused by a mime-type server issue. Basically the server wasn't configured to serve .svg files. Check your console, generally if this is the case you'll see something like 'Resource interpreted as image but transferred with MIME type...'. This can be fixed by adding a few lines the .htaccess file on your server. See this css-tricks article .

Answer 3

So I added it in an inline style sheet,

this works, however I want it in my css file

 <style>
    .sun-face{
        background-image: url("./images/Sun_face.svg");
        height:500px;
        width:100%:
    }
    </style>


<link href="./css/custom.css" rel="stylesheet">

I put it in ^^ doesn't work?