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, Jul 11 '14 at 06:20
did you tried "background:url("image path") no-repeat: left top;" like this with background position ? — G.L.P, Jul 11 '14 at 06: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, Jul 11 '14 at 06:30

score 3 · Accepted Answer · answered Jul 11 '14 at 06:26

3

Try with width and height properties

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

answered Jul 11 '14 at 06:26

Jesuraja

3,774
4
24
48

score 3 · Answer 2 · answered Nov 24 '20 at 13:36

3

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

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

answered Nov 24 '20 at 13:36

Nemanja Stojanovic

126
8

This may or may not work for the OP, depending on their project setup. – AlexH Nov 24 '20 at 14:00

score 1 · Answer 3 · edited Jul 11 '14 at 07:57

1

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.

edited Jul 11 '14 at 07:57

Sudharsan S

15,336
3
31
49

answered Jul 11 '14 at 06:32

Ajesh VC

635
5
13

score 0 · Answer 4 · edited May 23 '17 at 12:20

0

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;
}

edited May 23 '17 at 12:20

Community

1
1

answered Jul 11 '14 at 06:23

John Bupit

10,406
8
39
75

CSS can't find an image url

4 Answers4