리액트에서 background-image url

[김재훈]

먼저 App.js  코드입니다. 

import "./styles.css";
import "bootstrap/dist/css/bootstrap.css";
import { Navbar, Container, Nav, Jumbotron, Button } from "react-bootstrap";

function App() {
return (
<div className="App">
<Navbar bg="primary" variant="dark">
<Container>
<Navbar.Brand href="#home">Shoes-Shop</Navbar.Brand>
<Nav className="me-auto">
<Nav.Link href="#home">Home</Nav.Link>
<Nav.Link href="#features">Features</Nav.Link>
<Nav.Link href="#pricing">Pricing</Nav.Link>
</Nav>
</Container>
</Navbar>

<Jumbotron className="background">
<h1>20% Season OFF</h1>
<p>
This is a simple hero unit, a simple Jumbotron-style component <br />
for calling extra attention to featured content or imformation.
</p>
<p>
<Button variant="primary">Learn more</Button>
</p>
</Jumbotron>
</div>
);
}

export default App;

-----------------

style.css 코드입니다.

.App {
font-family: sans-serif;
text-align: center;
}

.background {
background-image: url("./sin.png");
background-size: cover;
}

Jumbotrome 에 background사진이 안 뜨고 있는데 도저히 이유를 모르겠습니다. src폴더에 사진이랑 App.js 다같이 있습니다.

 

 

[codingapple]

url("./sin.png"); 따옴표를 제거해보거나 

html 태그 안에서 style 속성으로 background-image를 넣어봅시다 

 

[글쓴이]

글