Seeking to enhance my CSS skills, I've been faced with a challenging task recently.
The objective is to create a full-screen background image with centered text overlay. However, the image appears larger than the screen itself.
This is my current setup:
My App.js
import React, { Component } from 'react';
import background from './images/background.jpg';
import './App.css';
export default class App extends Component {
render() {
return (
<div>
<div className="App-header">
<img src={background} className="App-background-header"/>
<div className="App-header-text">
<p>This text should be center on the image above.</p>
</div>
</div>
<div>
<p>This is a sample text after the image...</p>
</div>
</div>
);
}
}
My App.css
.App-header {
height: 100%;
}
.App-background-header {
height: 100%;
background-position: center;
background-size: cover;
background-repeat: no-repeat;
}
.App-header-text {
color: #444444;
text-align: center;
}
I aim for something like this:
Current result: https://i.stack.imgur.com/EKZ6W.jpg
-- EDIT: --
I managed to resolve the issue but unsure if it's considered best practice.
Here is the updated code:
App.js:
import React, { Component } from 'react';
import './App.css';
export default class App extends Component {
render() {
return (
<div>
<div className="App-header">
<div className="App-header-text">
<p>This text should be center on the image above.</p>
</div>
</div>
<div className="App-divider"></div>
<div>
Just a random text here...
</div>
</div>
);
}
}
App.css:
.App-header {
height: 100%;
width: 100%;
position: absolute;
background-position: center;
background-size: cover;
background-repeat: no-repeat;
background-image: url('./images/background.jpg');
}
.App-header-text {
color: #aaaaaa;
top: 50%;
position: relative;
text-align: center;
font-size: 30px;
}
.App-divider {
height: 100vh;
width: 100%;
}
The presence of "App-divider" may not be ideal, but it serves its purpose effectively.