How to insert an Image in css correctly

Question

Im trying to insert an image with css, the problem is that it works whit http images from the internet , but when i use my local images with the right path is not working.

btw I have the images in the same folder of the html file. also using right click copy path from visual code.

here is the css:

.cuerpo{
    background-image:url(""); 
    height: 100vh;
    background-size: bottom;
    display:flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;

}

this is the path im using C:\Users\elari\OneDrive\Documents\CacheStudioOff\img\LampPostBannercache.jpg — Ariel Cancel, Aug 30 '20 at 16:48

score 0 · Answer 1 · answered Aug 30 '20 at 16:56

If its on the same folder, try this solution.

.cuerpo{
    background-image:url("filename.extension"); 
    height: 100px;
    background-size: bottom;
    display:flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
}

So, you only write the filename.extension there.

score 0 · Answer 2 · answered Aug 30 '20 at 16:56

0

If you have your images in the same folder as the .html files, then you should specify only the image name. For example background-image: url('image.jpg')

answered Aug 30 '20 at 16:56

marco marco

147
8

How to insert an Image in css correctly

2 Answers2