Background image with JS React and Semantic-ui

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.

Why not using background-image instead of img tag?

Mosh Feu
– Mosh Feu

2020-07-22 09:34:08 +00:00
Commented Jul 22, 2020 at 9:34 — Mosh Feu
– Mosh Feu, Commented Jul 22, 2020 at 9:34

bas · Accepted Answer · 2020-07-22 09:42:52Z

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.

edited Jul 22, 2020 at 9:42

answered Jul 22, 2020 at 9:20

bas

15.2k7 gold badges27 silver badges70 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Background image with JS React and Semantic-ui

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related