Background image with JS React and Semantic-ui - reactjs

Question

Hei
Trying to get my page to display an image that is behind the text and icons.
Here is what I have currently:
import React from 'react';
import SamplePicture from '../../images/sample-picture.jpg';
class Front extends React.Component {
render() {
return (
<div className="ui segment">
<img className="ui floated image" src={SamplePicture} />
<p>
This is a front page that will have an image in the background
<br />
Sampletext
</p>
</div>
);
}
}
export default Front;
It displays the image but the text gets rendered below.
Basicly I want to create text that gets rendered on top of the image.
First time asking a question here so maybe there is some information that I should have shared, but haven't. Anyway, be harsh, tell me what is wrong about the code, the question.

Answer 1

You can do something like this using flexbox:
<div className="ui segment">
<div className="ui medium image">
<div
className="ui active center"
style={{
display: 'flex',
position: 'absolute',
width: '100%',
height: '100%',
justifyContent: 'center',
zIndex: 1,
}}>
<div className="content">Sampletext</div>
</div>
<img
src="https://via.placeholder.com/410x210"
className="ui floated image"
alt="alt"
/>
</div>
</div>
This solution uses flexbox to center the text over the image.
I've used via.placeholder.com as an image source to make it easy to demo, but you can change it to your image's src.
If the text isn't exactly centered, either change your container to a smaller size (from medium to small for example) or choose a bigger (wider) image.