Put an image/SVG/logo at the top corner of a text (Using react.js)

Question

I am trying to figure it out how to put an svg/png logo at the top corner behind a text like this example.

I tried to reproduce many stackoverflow threads like these(Position icon at the top right corner of a div, Put Font Awesome icon in top right corner), but I didn't solve this problem yet. I am using react and I did this for now

import React from 'react';
import { Link } from 'react-router-dom';
import styled from 'styled-components';
import { DEVICE } from '../shared/screenSizes';
import Image from './OK.png';

const ContactPage = () => {

  var container = {
    position: 'relative',
  };

  var topRight = {
    position: 'absolute',
    bottom: '3px',
    left: '45px',
    fontSize: '18px',
    width: '50px',
  };

  return (
    <div>
      <div style={container}>
        <div>My Text</div>
        <img style={topRight} src={Image} alt="324" />
      </div>
    </div>
  );
};

I realize 2 problems while coding.

1. I have a hard time putting the image in the background

2. I realize that I have to hardcode the horizontal position with the css attribut left depending on the length of the text

How can I fix this problem.

Thanks in advance

score 1 · Answer 1 · answered Jun 14 '21 at 11:39

You will want to use the css property z-index which controls the 'layer' of the object. Using a negative value will put it behind the text. This means it the image will be lower than the text. Since you are using an absolute positioning will not be able to give the text a higher z-index instead. See this answer on positioning and stacking contexts.

import React from 'react';
import { Link } from 'react-router-dom';
import styled from 'styled-components';
import { DEVICE } from '../shared/screenSizes';
import Image from './OK.png';

const ContactPage = () => {

  var container = {
    position: 'relative',
  };

  var topRight = {
    zIndex: '-1',
    position: 'absolute',
    top: '0',
    right: '0',
    fontSize: '18px',
    width: '50px',
    transform: 'translate(50%, -50%)',
  };

  return (
    <div>
      <span style={container}>
        <span>My Text</span>
        <img style={topRight} src={Image} alt="324" />
      </div>
    </div>
  );
};

score 1 · Answer 2 · answered Jun 14 '21 at 11:41

As the balloon is for decoration you may like to take it out of the HTML document and instead have it as a background to your text.

To place it in a way that makes its positioning relative to the text more responsive you can position it just inside the furthest point of the text.

This snippet is vanilla CSS/HTML to give the idea. It places the balloon in a pseudo element of the text element. Obviously you'll want to alter the distances to give the exact layout you want, but avoid the use of fixed units like px where possible.

.text {
  font-size: 4em;
  position: relative;
  display: inline-block;
  padding: 1em;
}

.text::before {
  content: '';
  position: absolute;
  top: 0.75em;
  left: calc(100% - 1.5em);
  width: 1em;
  height: 1em;
  background-image: url(https://your balloon image address);
  background-size: contain;
  z-index: -1;
  /* these put in just for a demo to make it balloon like */
  background-color: red;
  border-radius: 50%;
}

<div>
  <div>
    <div class="text">My Text</div>
  </div>
</div>

Put an image/SVG/logo at the top corner of a text (Using react.js)

2 Answers2