I am trying to set a background image to be full screen.
App.js:
import React from 'react';
import backgroundImage from './Resources/img.jpeg'
function App() {
return (
<div className="container"
style={{ backgroundImage: `url(${backgroundImage})` }} >
<h1>Hello</h1>
</div>
);
}
export default App;
index.css
.container {
height: 100%;
background-size: cover;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-repeat: no-repeat;
background-position: center;
overflow: hidden;
}
index.html:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<meta name="theme-color" content="#000000" />
<meta
name="description"
content="Web site created using create-react-app"
/>
<title>Weakly Scheduler</title>
</head>
<body>
<noscript>You need to enable JavaScript to run this app.</noscript>
<div id="root"></div>
</body>
</html>
The image is cut and shows only the part where the Hello is. if I add more of these then the images "reveals" more of its height. From this I think that the container itself is not full screened but I don't know why. The width is full screen as I want it to be. And ideas?
Update your style as follows:
.container {
height: 100vh;
width: 100vw;
background-size: cover;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-repeat: no-repeat;
background-position: center;
overflow: hidden;
}
body, html {
height: 100%;
margin: 0;
padding:0;
}
.container {
width: '100vw';
height: '100vh';
background-image: `url(${backgroundImage})`;
background-position: 'center';
background-size: 'cover';
background-repeat: 'no-repeat';
}
const containerStyle= {
width: '100vw',
height: '100vh',
backgroundImage: `url(${backgroundImage})`,
backgroundPosition: 'center',
backgroundSize: 'cover',
backgroundRepeat: 'no-repeat',
}
function App() {
return (
<div className="container"
style={containerStyle} >
<h1>Hello</h1>
</div>
);
}