Background Image not grabbing from Google Drive file

Question

I am working on a website that requires parallax, but I am currently running it out of Google Drive and Notepad++. For some reason, when I try to use background-image: url('');, It does not pull up the image from the Google Drive file directory.

Here is the code I have right now.

body,
html {
  height: 100%;
}

.parallax {
  /* image I want parallax on */
  background-image: url('G:\My Drive\Website\Parallax\TriangleHR.png');
  /* Full height */
  height: 100%;
  /* Create scrolling effect */
  background-attachment: fixed;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}


/* Turn off parallax scrolling for tablets and phones. Increase the pixels if needed */

@media only screen and (max-device-width: 1366px) {
  .parallax {
    background-attachment: scroll;
  }
}

<!DOCTYPE html>
<html>

<head>
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="G:\My Drive\Website\Parallax\styles.css">
</head>

<body>


  <div class="parallax"></div>

  <div style="height:1000px;background-color:red;font-size:36px">
    <p>Allows for scrolling.</p>
  </div>

  <div class="parallax"></div>

</body>

</html>

This should activate parallax for all computers/laptops and disable it for all phones for less stress/lag. However it doesn't even show the image at all.

score 1 · Answer 1 · edited May 10 '23 at 23:45

I think you might have missed "file:///"

as mentioned here

You can try doing:

body,
html {
  height: 100%;
}

.parallax {
  /* image I want parallax on */
  background-image: url('file:///G:\My Drive\Website\Parallax\TriangleHR.png');
  /* Full height */
  height: 100%;
  /* Create scrolling effect */
  background-attachment: fixed;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}


/* Turn off parallax scrolling for tablets and phones. Increase the pixels if needed */

@media only screen and (max-device-width: 1366px) {
  .parallax {
    background-attachment: scroll;
  }
}

<!DOCTYPE html>
<html>

<head>
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="file:///G:\My Drive\Website\Parallax\styles.css">
</head>

<body>


  <div class="parallax"></div>

  <div style="height:1000px;background-color:red;font-size:36px">
    <p>Allows for scrolling.</p>
  </div>

  <div class="parallax"></div>

</body>

</html>

Background Image not grabbing from Google Drive file

1 Answers1