How to add a background image in html from local folder-CodePudding

I need some help in understanding how I can get the following HTML coding to work.

<!DOCTYPE html>

<html>

<head>

<title>YAHUAS</title>

<style>
body {
  background-image: url("Pictures/Yahuas.png");
  background-repeat: no-repeat;
  background-size: cover;
}

</style>
</head>

<body>
<a href="student.php">Student data</a>

</body>
</html>

Should I be changing the following - background-image: url("Pictures/Yahuas.png"); so that it goes to the folder in the C:\Users\user\OneDrive - Bradford College\Advance Database\YAHUAS\PHP and HTML where this image is stored?

CodePudding user response：

If the Pictures folder is located in the same path as your html file is, then it should work. Could you double check that the Pictures folder and your saved html file are in the same path?

I don't think you want to use the absolute path to the image unless you are going to view the html file only on your own computer. If you would put it on a web server or any other computer it is highly unlikely that the image would be found in the same path.

CodePudding user response：

You should give to the exact URL Path

    <style>
    
      body {
        background-image: url("./Pictures/Yahuas.png");
        background-repeat: no-repeat;
        background-size: cover;
      }
    
    </style>

CodePudding user response：

Your Question is not really clear. However, I will assume you are trying to pick your image from the back of your folders/directories or from another Drive (e.g. C, D, F).

The Answer is Yes, You can Either use a backslash (Windows) or a forward-slash (Linux) with a full path or you can use a relative path if the image is present in the current directory or back directory.

<style>
   body {
      // Another Drive
      background-image: url("C:/Users/user/My OneDrive/Pictures/pic.png");

      // Relative Path
      background-image: url("Pictures/pic.png");
      // OR 
      background-image: url("./Pictures/pic.png");

      // Back Directory/Folder
      background-image: url("../Pictures/pic.png");
   }
</style>