Я работал над простым приложением, и я пытаюсь установить изображения в качестве фона для моей главной страницы (изображение покрывает весь мой фон), я проверил много ответов, которые находятся в stackoverflow, но я не мог это исправить, интересно как это исправить?
App {
text-align: center;
height: 100%;
background: url("N.png") no-repeat;
background-size: cover;
}
.App-logo {
animation: App-logo-spin infinite 20s linear;
height: 80px;
}
.App-header {
background-color: #222;
height: 150px;
padding: 20px;
color: white;
}
.App-title {
font-size: 1.5em;
}
.App-intro {
font-size: large;
}
@keyframes App-logo-spin {
from { transform: rotate(0deg); }
to { transform: rotate(360deg); }
}
class App extends Component {
render() {
return (
<div className = "App">
<header className = "App-header">
<img src = {logo} className = "App-logo" alt = "logo" />
<h1 className = "App-title">Welcome to React</h1>
</header>
<p className = "App-intro">
To get started, edit <code>src/App.js</code> and save to reload.
</p>
</div>
);
}
}
export default App;
Также установите height
родительских элементов на 100%
.
html,
body,
#root {
height: 100%;
}