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 stackoverflow.com/questions/9384299/css-relative-url-to-images .. look up relative URL paths.. you will want "../images/logo.png" — Josh Crozier
– Josh Crozier, Commented Oct 6, 2013 at 2:08

Amal · Accepted Answer · 2013-11-10 19:34:49Z

6

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, 2013 at 19:34

Amal

76.8k18 gold badges133 silver badges154 bronze badges

answered Oct 6, 2013 at 2:08

vishalkin

1,2552 gold badges13 silver badges25 bronze badges

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

3 Comments

ariel Over a year ago

That worked. Never seen the usage of dots before the folder name. Why is that?

vishalkin Over a year ago

@ariel Please mark this answer correct so that there will be no more duplicate answers. Thank you

Seth Over a year ago

.. goes back a directory. You called the image in the css directory, which it wasn't in.

misterzik · Accepted Answer · 2015-09-29 18:03:17Z

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, 2015 at 18:03

misterzik

1,9201 gold badge18 silver badges20 bronze badges

3 Comments

misterzik Over a year ago

how is this a bad negative answer?

Neil T Over a year ago

Maybe because you've misspelt 'Oz'?

jamacoe Over a year ago

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.

Ron_B · Accepted Answer · 2013-10-06 02:11:17Z

0

Try changing this to

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

answered Oct 6, 2013 at 2:11

Ron_B

667 bronze badges

1 Comment

vishalkin Over a year ago

he has image in one folder and css in another folder.

somethinghereplease1 · Accepted Answer · 2013-10-06 02:15:35Z

0

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

answered Oct 6, 2013 at 2:15

somethinghereplease1

651 silver badge9 bronze badges

Collectives™ on Stack Overflow

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

4 Answers 4

3 Comments

3 Comments

1 Comment

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

3 Comments

3 Comments

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related