Background Image not working with this following code

Question

This is my code and somehow I am not able to get the image loaded.

import React from 'react'
import styled from "styled-components"


function Section() {
  return (
    <Wrap>
      
    </Wrap>
  )
}

export default Section

const Wrap = styled.div`
  width: 100vw;
  height: 100vh;
  background-image: https://drive.google.com/file/d/1rMeRfE2OEktMOGVlgA1TwJKNj1teuLtG/view?usp=sharing;
`

What should I do?

Answer 1

For the direct link of an image stored in Google Drive:

https://drive.google.com/uc?export=view&id=file's ID

So the URL of your image should be:

https://drive.google.com/uc?export=view&id=1rMeRfE2OEktMOGVlgA1TwJKNj1teuLtG.

Then, use it via CSS background-image: url('https://drive.google.com/uc?export=view&id=1rMeRfE2OEktMOGVlgA1TwJKNj1teuLtG')

See, Displaying files (e.g. images) stored in Google Drive on a website

Answer 2

When you use background-image, you should use url() with URL.

ref: https://developer.mozilla.org/en-US/docs/Web/CSS/background-image

const Wrap = styled.div`
  width: 100vw;
  height: 100vh;
  background-image: url("https://drive.google.com/file/d/1rMeRfE2OEktMOGVlgA1TwJKNj1teuLtG/view?usp=sharing");

Edit

Your Url is not Image so you can not load image with your Google Drive Url.

Answer 3

You have set the wrong value for the CSS property.

✓ Use This:

background-image: url("https://drive.google.com/file/d/1rMeRfE2OEktMOGVlgA1TwJKNj1teuLtG/view?usp=sharing");

✘ Instead of your this code:

background-image: https://drive.google.com/file/d/1rMeRfE2OEktMOGVlgA1TwJKNj1teuLtG/view?usp=sharing;

As in your current question I see you have forgotten to put url().