CSS can't find an image url

Question

The below code is all inline CSS.

DOESN'T WORK

#Image { background-image: url('Images/home.png'); }

DOESN'T WORK

#Image { background-image: url('http://localhost:63832/Images/home.png'); }

But when I copy and paste the url, i can access the image. I can also see this defined and active when I check the css in the browser.

WORKS

<img id="Image" src="Images/home.png" />

Maybe you're using a background property for #Image somewhere else in your code. Are you sure there are no other conflicting styles present. Inspect the #Image in your browser and see what all styles are actually applied to it. — John Bupit
– John Bupit, Commented Jul 11, 2014 at 6:20
did you tried "background:url("image path") no-repeat: left top;" like this with background position ? — G.L.P
– G.L.P, Commented Jul 11, 2014 at 6:20
background-image, while setting the background of the element, doesn't give the element any size. If you're not getting a file_not_found error in the JS console, then the image is being loaded, but is just not visible. — enhzflep
– enhzflep, Commented Jul 11, 2014 at 6:30

Jesuraja · Accepted Answer · 2014-07-11 06:26:17Z

3

Try with width and height properties

#Image { background-image: url('Images/home.png'); width: 100px; height: 100px; }

answered Jul 11, 2014 at 6:26

Jesuraja

3,8524 gold badges26 silver badges49 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Nemanja Stojanovic · Accepted Answer · 2020-11-24 13:36:23Z

3

I resolved the same issue by putting ../../ before the path of the image

#Image { background-image: url('../../Images/home.png'); }

answered Nov 24, 2020 at 13:36

Nemanja Stojanovic

1268 bronze badges

1 Comment

AlexH Over a year ago

This may or may not work for the OP, depending on their project setup.

Community · Accepted Answer · 2017-05-23 12:20:46Z

You must be using a background property for #Image somewhere else in your code. Are you sure there are no other conflicting styles present? Inspect the #Image in your browser and see what all styles are actually applied to it.

Try using !important if you're not sure. But I would avoid using it:

#Image { background-image: url('Images/home.png') !important; }

Sudharsan S · Accepted Answer · 2014-07-11 07:57:31Z

Make the css like

 #Image { background-image: url('Images/home.png') !important; }

if it already defined anywhere in your site is replace and add this.

Collectives™ on Stack Overflow

CSS can't find an image url

4 Answers 4

Comments

1 Comment

Comments

Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

1 Comment

Comments

Comments

Linked

Related