CODEWITHSUNDEEP
htmlcssreactjs
Freedom Essence
Freedom Essence

Reputation: 100

How to add text on image in ReactJS?

I am learning ReactJS. Today I decided to create my own blog. Header needs image with some text. And when trying to add text on image, text slides down. I need to my text position to be at center

[image] 1

Code:

Header.tsx

import React from "react";
import './header.scss'

const Header = () => {
  return (
    <header>
      <div className = "head-text">
        <div className = "head-image">
          <img src = {require ('../ images / Header.png')} alt = "Freedom Blog" />
        </div>
          <h3> Welcome to my Blog </h3>
          <p> FREEEEDOM </p>
      </div>
    </header>
  )
}


export default Header;

Header.tsx

import React from 'react';
import Header from './components/Header';
import './index.scss'

const App = () => {
  return (
    <>
      <Header />
    </>
  );
}

export default App;

CSS files are empty, so I didn't add them.

Upvotes: 3

Views: 31663

Answers (4)

Amirali Hatami
Amirali Hatami

Reputation: 137

if you want hadle text on image please following this code (make tailwindcss):

<Div className="relative flex flex-row-reverse justify-between items-center rounded-3xl">
    <Img
      src="./sky.webp"
      className="absolute w-full h-full top-0 left-0 object-cover rounded-3xl bg-transparent"
    />
    <Span
      className=" rounded-[21.9px]  flex flx-row justify-center items-center w-full h-full text-[150px]  dark:bg-darkBackground"
      style={{ mixBlendMode: "multiply" }}
    >
      Let's Talk
    </Span>
  </Div>

you can delete mixBlendMode

Upvotes: 0

MUSIC HOLIC
MUSIC HOLIC

Reputation: 88

<div className = "head-text">
        <div className = "head-image">
          <img src = {require ('../ images / Header.png')} alt = "Freedom Blog" />
        </div>
        <div className="center__text">
          <h3> Welcome to my Blog </h3>
          <p> FREEEEDOM </p>
        </div>
</div>

You can do it like this

.head-text{
position: relative;
color: white;

color mention above will be the color of your text

.center__text{
position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

Now your text will appear in center of your image

Upvotes: 0

coderrr22
coderrr22

Reputation: 387

You can add text on an image using CSS absolute positioning. Can read about it here

add CSS class to the text you want to display on the image for example :

const Header = () => {
  return (
    <header>
      <div className = "head-text">
        <div className = "head-image">
          <img src = {require ('../ images / Header.png')} alt = "Freedom Blog" />
        </div>
          <div class='text-on-image'>
             <h3> Welcome to my Blog </h3>
             <p> FREEEEDOM </p>
          </div>
      </div>
    </header>
  )
}

Then in header.css:

.head-text {
   position: relative;
}
.text-on-image {
  position: absolute;
  right: 50%;
  left: 50%;
  bottom: 15%;
}

This will place the text on the bottom center of the image.

The div which has position relative is the div by which the absolute positioned (text-on-image) right,left,bottom properties are determined by.

So for example a bottom:10px will make the text-on-image place it self 10px above the bottom part of the div which has position: relative

Play with the CSS absolute position values in order to place it where you want. more examples here

Upvotes: 6

user14466785
user14466785

Reputation:

You could do something like:

<header>
  <img src = {require ('../ images / Header.png')} alt = "Freedom Blog" />
  <h3> Welcome to my Blog </h3>
  <p> FREEEEDOM </p>
</header>

header {
  position: relative;
  text-align: center;
  padding-top: 25px;
}
header img {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
}

Upvotes: 2

Related Questions