CODEWITHSUNDEEP
reactjssemantic-ui
Kristian Rykkje
Kristian Rykkje

Reputation: 21

Background image with JS React and Semantic-ui

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.

Upvotes: 2

Views: 413

Answers (1)

bas
bas

Reputation: 15722

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.

Upvotes: 1

Related Questions