CODEWITHSUNDEEP
javascripthtmlcss
Getsomepeaches
Getsomepeaches

Reputation: 1051

having issue with background-image not showing

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

Upvotes: 0

Views: 70

Answers (3)

Boopathi Rajan
Boopathi Rajan

Reputation: 1210

use this css

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

Upvotes: 1

Getsomepeaches
Getsomepeaches

Reputation: 1051

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?

Upvotes: 0

Josh Rutherford
Josh Rutherford

Reputation: 2723

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.

Upvotes: 0

Related Questions