How do I display an image via CSS in my local environment?

Question

This is quite embarrasing. I am learning new things but I am surprised I can't figure this out on my own.

On my desktop, I have a folder called Test and in that I have index.html and a folder called CSS, which contains index.css and another folder called images with an image called logo.png.

In my index.css file, I have the following line:

background: url("images/logo.png") no-repeat;

Using the above line I can't display the image locally. I tried using /images and test/images but it doesn't work. How can I display this if I am viewing it locally?

See http://stackoverflow.com/questions/9384299/css-relative-url-to-images .. look up relative URL paths.. you will want `"../images/logo.png"` — Josh Crozier, Oct 06 '13 at 02:08

score 5 · Accepted Answer · edited Nov 10 '13 at 19:34

5

As you mentioned, you have different folders for CSS and images inside your root folder Test. Since you are writing code for background in your CSS file:

Case 1:

background:url("logo.png");

Will search for your image inside CSS folder.

Case2:

background:url("images/logo.png");

Will search for images folder first inside CSS folder and then will search for logo.png inside that images folder. (But there is no images folder inside your CSS folder).

Case3:

background: url("../images/logo.png") no-repeat;

In this case .. will take you back to the main directory (i.e. from css folder to your root forder Test. Then /images will take you inside images folder and it will find /logo.png as a path to your image.)

edited Nov 10 '13 at 19:34

Amal Murali

75,622
18
128
150

answered Oct 06 '13 at 02:08

vishalkin

1,175
2
12
24

That worked. Never seen the usage of dots before the folder name. Why is that? – ariel Oct 06 '13 at 02:11
@ariel Please mark this answer correct so that there will be no more duplicate answers. Thank you – vishalkin Oct 06 '13 at 02:13
3

.. goes back a directory. You called the image in the css directory, which it wasn't in. – Seth Oct 06 '13 at 02:15

score 3 · Answer 2 · answered Sep 29 '15 at 18:03

3

Change img to the name of your class. Use content instead of background or background-image, and Set some width.

img {
     content: url("../img/Wizard-of-os-black.png");
     width: 90px;
}

answered Sep 29 '15 at 18:03

misterzik

1,740
1
16
20

how is this a bad negative answer? – misterzik Nov 27 '15 at 16:06
1

Maybe because you've misspelt 'Oz'? – Neil T Sep 19 '17 at 15:17
Very nice. I fiddled with background and background-image, had to set width and height and had a thin border even with border=0 padding=0 0 0 0 and margin=0 0 0 0. Now I just need a class, display block and margin 0 auto 0 auto to display a logo centered. – jamacoe Mar 17 '20 at 20:28

score 0 · Answer 3 · answered Oct 06 '13 at 02:11

0

Try changing this to

background-image: url("images/logo.png") no-repeat;

answered Oct 06 '13 at 02:11

Ron_B

66
7

1

he has `image` in one folder and `css` in another folder. – vishalkin Oct 06 '13 at 02:14

score 0 · Answer 4 · answered Oct 06 '13 at 02:15

Basically, you would have to think logically. If your in a CSS file in contained within a folder, all links in the file are searched in the folder. If you want to link to an image in a folder called /img in the root of your site, you would have to move up a level by using

../img/pic.extension

How do I display an image via CSS in my local environment?

4 Answers4