Html Question posted in
Some basic documentation can be found here.

Html – 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("PhotosDesert.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;
Tags:

2

Answers


  1. 0

    Inorder, to traverse to the given directory you can traverse directly by copying the path into or ** you can use "../" ** to go down a directory(This works in Ubuntu operating system not sure about windows)

    Current senario..

    If the picture is in Desktop/Users/Pictures/Desert.jpg and you are in Documents/vscode_projects you need to write it like this.

    body{
  background-url : ("../../../Desktop/Users/Pictures/Desert.jpg");
}

    Also you can directly type the file name if the picture is in the local folder.

    Login or Signup to reply.
  2. 0

    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.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search