I am trying to make a full-screen background image for my website but it does not seem to work. My current code only shows the portion of the background image where components are rendered. I have tried to use background-position: fixed in the App.css file, but the background image becomes full screen but I’m not able to scroll, which is even worse. How do I get this to work?
How my website looks like now:
I tried to set min-width: 100vw and min-height: 100vh but now the top of the webpage is still having the same problem and the webpage becomes scrollable.
Edited webpage:
Below are my files for my App.js and App.css respectively.
JavaScript
x
53
53
1
class App extends Component {2
componentDidMount() {3
this.props.onAuthCheck();4
}5
6
render() {7
const auth = this.props.token !== null;8
return (9
<BrowserRouter>10
<div className="App">11
<Route path="/" exact component={Login} />12
<Route path="/signup" exact component={SignUp} />13
<GuardedRoute14
path="/home"15
component={Home}16
auth={auth}17
exact18
/>19
<GuardedRoute20
path="/stocks"21
component={Stocks}22
auth={auth}23
exact24
/>25
<GuardedRoute26
path="/News"27
component={News}28
auth={auth}29
exact30
/>31
<GuardedRoute32
path="/profile"33
component={Profile}34
auth={auth}35
exact36
/>37
<GuardedRoute38
path="/your-analysis"39
component={YourAnalysis}40
auth={auth}41
exact42
/>43
<GuardedRoute44
path="/create-analysis"45
component={CreateAnalysis}46
auth={auth}47
exact48
/>49
</div>50
</BrowserRouter>51
);52
}53
}JavaScript
1
9
1
.App {2
background-image: url('./assets/login-bg.jpg');3
min-width: 100%;4
min-height: 100%;5
background-size: cover;6
background-position: center center;7
background-attachment: fixed;8
list-style: none;9
}Advertisement
Answer
Try this:
JavaScript
1
10
10
1
.App {2
background-image: url('./assets/login-bg.jpg');3
min-width: 100%;4
min-height: 100vh;5
background-size: cover;6
background-position: center center;7
background-attachment: fixed;8
list-style: none;9
}10
or you can set the background image to the <body>