How do I put a text on a text

Question

enter image description here

Is there a way to put text on a text like above in CSS or JS?

use 2 different elements and set position with css. try writing your code first — Pauline Nemchak, Dec 11 '20 at 09:50
Please visit the [help], take the [tour] to see what and [ask]. Do some research, search for related topics on SO; if you get stuck, post a [mcve] of your attempt, noting input and expected output using the `[<>]` snippet editor. — mplungjan, Dec 11 '20 at 09:53

score 3 · Answer 1 · edited Dec 11 '20 at 10:02

3

Use a parent of relative position and add text as absolute child elements:

.elements {
  position: relative;
}

.outer-element, .inner-element {
  font-size: 60px;
  font-family: verdana;
  font-weight: bold;
}
.outer-element {
  color: blue;
}
.inner-element {
  position: absolute;
  left: 50px;
  top: 35px;
  color: yellow;
}

<div class="elements">
  <div class="outer-element">GTA</div>
  <div class="inner-element">ROLEPLAY</div>
</div>

Code fiddle

edited Dec 11 '20 at 10:02

mplungjan

169,008
28
173
236

answered Dec 11 '20 at 10:00

Ahmad Habib

2,053
1
13
28

Also https://stackoverflow.com/questions/39884260/is-it-possible-to-set-horizontal-gradient-to-text-via-css-left-letter-one-colo – mplungjan Dec 11 '20 at 10:06

score 0 · Answer 2 · edited Dec 11 '20 at 09:53

Try this

<div style="position:absolute; top:0;left:0;">some text</div>
<div style="position:absolute; top:5;left:5;">some text</div>
<div style="position:absolute; top:10;left:10;">some text</div>
<br/>
<div style="position:absolute; top:110;left:100;">some text</div>
<div style="position:absolute; top:105;left:105;">some text</div>
<div style="position:absolute; top:100;left:110;">some text</div>

MsieurKris · Answer 3 · 2020-12-11T10:13:40.007

0

Yes you can add text in front of an image using CSS.

Check : https://www.w3schools.com/howto/howto_css_image_text.asp

.container {
      position: relative;
      text-align: center;
      color: white;
    }

    .firstline {
      position: absolute;
      top: 8px;
      left: 15px;
      font-size: 50px;
      font-weight: bold;
      color: white;
    }

    .secondtline {
      position: absolute;
      top: 22px;
      left: 40px;
      font-size: 70px;
      font-weight: bold;
      color: orange;
    }

<div class="container">
      <img src="https://www.w3schools.com/howto/img_snow_wide.jpg" alt="Snow" style="width:100%;">
      <div class="firstline">GTA</div>
      <div class="secondtline">ROLEPLAY</div>
    </div>

edited Dec 11 '20 at 10:13

answered Dec 11 '20 at 09:55

MsieurKris

387
1
4
14

check again, one mistake was present – MsieurKris Dec 11 '20 at 10:06
it's just settings in CSS (you can try changing size of texte, reducing margin etc...), check again... ROLEPLAY is now on GTA. – MsieurKris Dec 11 '20 at 10:14

How do I put a text on a text

3 Answers3