How to Write Text on Image in React JS

Text on the image is a classic type of content. And we see it everywhere around us. It's usually used to pinpoint the eyes of readers. And to demonstrate the concept or the idea in a better way.

In this article, we're gonna show how to write text on an image in React JS.

2 common methods to write text on an image in React JS:

• Placing text on the element and setting background property.
• Positioning text over img or picture element.

We'll take a closer look at each method individually. And we're gonna use each method to implement the following design.

It's a very simple design, but at the same time. It allows us to demonstrate the following techniques in great detail. The first way to write text on an image in React is by using CSS background property.

Placing Text on the Background

This technique relies on using CSS background property.

The background shorthand CSS property sets all background style properties at once, such as color, image, origin and size, or repeat method. (source: MDN)

In order to write text on the background property, we need to implement 2 core elements:

• Any HTML element that we use to hold a background
• Element to write a text on the image

Background.jsx

import styles from "./Background.module.css";

import background from "../../assets/img/background.png";

const Background = () => {
  return (
    <article
      className={styles.article}
      style={{ backgroundImage: `url(${background})` }}
    >
      <h1 className={styles.header}>React Is Awesome</h1>
    </article>
  );
};

export default Background;

Background.module.css

.article {
    height: 100%;
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    display: grid;
    place-items: center;
}

.header {
    font-size: 80px;
    color: white;
    text-align: center;
}

This was a very simple implementation using the CSS background property. But there may be occasions when it's simply not sufficient enough. For these kinds of occasions, we need to use different types of techniques, like img or picture elements.

In the next section, we're gonna place a text over the image using img element.

Positioning Text Over the Image Element

The next technique is making use of img tag.

The img HTML element embeds an image into the document. (source: MDN)

In order to write text over the img element, we need to:

• Have a container element that will hold the image and the text
• Use img tag to display the background
• Use any HTML element to display text over the image

Image.jsx

import styles from "./Image.module.css";

import background from "../../assets/img/background.png";

const Image = () => {
  return (
    <article className={styles.article}>
      <img className={styles.image} src={background} alt="background" />
      <h1 className={styles.header}>React Is Awesome</h1>
    </article>
  );
};

export default Image;

Image.module.css

.article {
    height: 100%;
    position: relative;
    overflow: hidden;
}

.picture {
    object-fit: cover;
    width: 100%;
    height: 100%;
}

.header {
    font-size: 80px;
    color: white;
    text-align: center;
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    height: fit-content;
    margin: auto;
}

As we see in the example above, it's possible to achieve the same effect using the img element. However, img tag is getting more and more obsolete. And developers are encouraged to use picture instead.

In the next section, we'll rework our current implementation to use picture element.

Positioning Text Over the Picture Element

The following technique is fairly similar to the one in the section before. But instead of img, we're using picture element.

The picture HTML element contains zero or more source elements and one img element to offer alternative versions of an image for different display/device scenarios. The browser will consider each child source element and choose the best match among them. If no matches are found—or the browser doesn't support the picture element—the URL of the img element's src attribute is selected. (source: MDN)

Picture.jsx

import styles from "./Picture.module.css";

import background from "../../assets/img/background.png";

const Picture = () => {
  return (
    <article className={styles.article}>
      <picture className={styles.picture}>
        <source media="(min-width: 0px)" srcSet={background} />
        <img src={background} alt="background" />
      </picture>
      <h1 className={styles.header}>React Is Awesome</h1>
    </article>
  );
};

export default Picture;

Picture.module.css

.article {
    height: 100%;
    position: relative;
    overflow: hidden;
}

.image {
    object-fit: cover;
    width: 100%;
    height: 100%;
}

.header {
    font-size: 80px;
    color: white;
    text-align: center;
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    height: fit-content;
    margin: auto;
}

Making Text Stand Out on the Background

One of the most recognizable things about good web design is that they know how to make text stand out with any background.

However, there are many challenges when trying to create text that stands out against backgrounds. The biggest challenge is choosing the right colors.

Choosing the right colors is the first step of making the text stand out. But additionally, we can apply additional CSS magic to make the text stand out even more.

In this section, we're gonna look at some techniques, which can be applied to make the text stand out on any background.

Using Text Shadow to Make Text Stand Out

By adding text-shadow property to the heading, we can make sure the text will be easier to read on any background.

The text-shadow CSS property adds shadows to text. It accepts a comma-separated list of shadows to be applied to the text and any of its decorations. Each shadow is described by some combination of X and Y offsets from the element, blur radius, and color. (source: MDN)

We're gonna apply the following CSS property to our text element. Notice how it makes the text stand out.

text-shadow: 0 0 25px black;

Changing Background to Make Text Stand Out

Another way to make the text easier to read is by modifying the background. This way, we're only changing the background and the original text will remain untouched.

To modify the background in a convenient way, we can make use of the CSS filter property.

The filter CSS property applies graphical effects like blur or color shift to an element. Filters are commonly used to adjust the rendering of images, backgrounds, and borders. (source: MDN)

To modify our example, we can increase the contrast and reduce the brightness of the background. This will make sure that white text will be easier to read. Just look at the comparison in the image below.

We applied the following filter properties. Can you see the difference?

filter: contrast(1.35) brightness(0.65);

Concluding Thoughts

Images and background images in particular are common components in today's websites. They are typically used in combination with text to grab users' attention. For this reason, it's important to know how to properly write text on images.

When it comes to React, there are multiple ways to write text on the image. In this article, we looked at different ways of writing a text on the image. And demonstrated each method on the code example written in React.

We also shared tips and tricks to make the text stand out from the background. These tips contain methods like choosing proper color schemes, text-shadow, or darkening background.

With this information in mind, you should know how to properly place a text on an image in React. And start using mentioned techniques in your React project.