CODEWITHSUNDEEP
htmlcssreactjs
Achoi98
Achoi98

Reputation: 215

Not able to load background-image to a div in html/css

I have been having this issue for awhile now. I'm using reactjs and trying to add a background image to a div tag 

<div className="ficon"></div>

in the css file I have 

  .ficon {
    max-width: 100px;
    max-height:100px;
    background-image: url('/Users/anthonychoi98/Documents/GitHub/portfolio/src/images/folder-icon (1).png');
}

The thing is that it works when the url address is http or from the internet, but not when it's local in my computer. I tried using the relative path and that didn't work either. It compiles without any errors or warnings, it just doesnt display the image. I know the url is right because it works when I use it as an image. 

<img src="/Users/anthonychoi98/Documents/GitHub/portfolio/src/images/folder-icon (1).png"/>

Thanks in advance!

Upvotes: 0

Views: 80

Answers (1)

jdenoc
jdenoc

Reputation: 85

Have you tried using a relative path to the image file? For example:

<img src="src/images/folder-icon (1).png" />

Also consider removing the space from the filename.

Upvotes: 1

Related Questions