reactjs - 如何在React + bootstrap中添加背景图片？(How do I add a background image in React+bootstrap?)

Question

I have been trying to add a background image to my webpage.

(我一直在尝试向我的网页添加背景图片。)

This is how I am currently trying to do it but it doesn't seem to work.

(这是我目前正在尝试执行的操作，但似乎没有用。)

in my App.js file:

(在我的App.js文件中：)

import React from 'react';
import './App.css';
import NavBar from './Components/NavBar';
import LandingPageImage from './Components/LandingPageImage';


function App() {
  return (
    <div className="App">
      <div className="Screen" >
        <NavBar/>
        <LandingPageImage/>
      </div>
    </div>
  );
}

export default App;

in my App.css file:

(在我的App.css文件中：)

.Screen {
 background-image: url("https://images.unsplash.com/photo-1536514498073-50e69d39c6cf?ixlib=rb-1.2.1&auto=format&fit=crop&w=1951&q=80");
}

This doesnot seem to work.

(这似乎不起作用。)

I was expecting to see the background image on the Screen div but nothing shows up.

(我原本希望在Screen div上看到背景图像，但是什么也没有显示。)

  ask by Rahul Chatterjee translate from so

Answer 1

等待大神答复