Geek Answers Handbook

How to display image via CSS in my local environment?

This is pretty awkward. I am learning new things, but I am surprised that I can not figure it out on my own.

On my desktop, I have a Test folder and it also has a index.htmlfolder called CSS, which contains index.cssanother folder with images with an image with the name logo.png.

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

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

Using the line above, I cannot display the image locally. I tried using /imagesand test/images, but it does not work. How can I display this if I view it locally?

+4
source share
4 answers

, CSS Test. background CSS:

1:

background:url("logo.png");

CSS.

Case2:

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

images CSS, logo.png images. ( CSS ).

3:

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


.. (.. CSS Test). /images images /logo.png .)

+4

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

Basically, you should think logically. If your CSS file is contained in a folder, all links in the file are searched in the folder. If you want to link to an image in a folder named / img in the root directory of your site, you will need to go up a level with

../img/pic.extension
0
source

Change img to your class name. Use content instead of background or background image and set some width.

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

More articles:


All Articles