Search code examples
htmlcssvisual-studio-codebackground-image

I am not able to use the background-image CSS as i have the photo in different folder in VS code

I have saved the photo in a some other folder in VS code and my code is in some other folder and i want to use the photo as background image in code

background-image: url("\Photos\Desert.jpg");
background-size: cover;

I tried this but the image is not showing; If I put the image in the same folder as code and use 👇 it is working

background-image: url("Desert.jpg");
background-size: cover;
Solution

  • You can find a detailed explanation of how relative paths work here

    A small correction to your initial post will be to adjust the path since you are using backward slash

    background-image: url("/Photos/Desert.jpg");
background-size: cover;

    Also, the reason it works when you put it in the same folder is because the relative path is at the root

    background-image: url("Desert.jpg");
background-size: cover;

    Endeavor to place the image folder inside of the project.