CODEWITHSUNDEEP
htmlcsslocal
ariel
ariel

Reputation: 3072

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

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?

Upvotes: 6

Views: 43507

Answers (4)

misterzik
misterzik

Reputation: 1890

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

Upvotes: 3

vishalkin
vishalkin

Reputation: 1235

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.)

Upvotes: 6

somethinghereplease1
somethinghereplease1

Reputation: 65

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

Upvotes: 0

Ron_B
Ron_B

Reputation: 66

Try changing this to

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

Upvotes: 0

Related Questions