How to put text over image in a fixed, responsive position with CSS/HTML?

Question

I need to put some text over an image in a specific position. I want the text to stay in place & reduce its font-size when the viewport shrinks. Like this:

Text MUST be just above the horizontal green line, and it MUST touch the yellow line on the right.

This is my code:

    <style>
        #hero img {
            width: 100%;
        }

        #motto {
            position: absolute;
            bottom: 272px;
            right: 360px;
            font-size: 59px;
        }
    </style>

    <div id="hero">
        <img src="image.jpg">
        <div id="motto">This is my long, long text</div>
    </div>

The text is correctly positioned iniitally, but then it goes banana when I shrink the viewport

I also tried with font-size: 5vw. The font size seems to shrink, but it doesn't stay in place.

I would like to preserve the <img> and NOT using a background-image, if possible. Anything else would work for me.

Thanks

Someone suggested to take a look at Text over image - responsive . I did (I already did before posting, actually), and it doesn't work the way I need it to (the font-size is fixed, and it doesn't shrink, which is the main problem here). For context: the (adapted) code of that answer is

    <style>
        img {
    display: block;
    width: 100%;
}

.thumbnail {
    position: relative;
    display: inline-block;
}

.caption {
    position: absolute;
    top: 77%;
    left: 66%;
    transform: translate( -50%, -50% );
    text-align: center;
    color: white;
    font-weight: bold;
}
    </style>

    <div id="box-search">
        <div class="thumbnail">
            <img src="image.jpg" alt="">
            <div class="caption">
                <p>This is my long, long text</p>
            </div>
        </div>
    </div>

The result is this:

@HereticMonkey No, it doesn't. Question edited, thanks for your reply. — Dr. Gianluigi Zane Zanettini, Dec 18 '22 at 15:38

score 2 · Accepted Answer · answered Dec 18 '22 at 14:50

2

Responsive + fixed position (px) won't work together.

If you want something to be responsive, the positioning must be too. You'll be looking to use % or vw/vh rather than px.

Unfortunately, didn't have your image to work with, so borrowed the second image from your post to demonstrate (so ignore the second "This is my long, long text").

#hero {
  position: relative;
}

#hero img {
  width: 100%;
}

#motto {
  position: absolute;
  bottom: 26%;
  right: 27%;
  font-size: 5vw; /** responsive font-size **/
}

<div id="hero">
  <img src="https://i.stack.imgur.com/r0twu.jpg">
  <div id="motto">This is my NEW long, long text</div>
</div>

answered Dec 18 '22 at 14:50

Jordan

1,390
2
9
24

I'm testing this now, but it look very promising. Thanks! – Dr. Gianluigi Zane Zanettini Dec 18 '22 at 15:50
1

Confirmed, I accepted your answer! Could you please elaborate why `#hero` needs to be in `position: relative;`? – Dr. Gianluigi Zane Zanettini Dec 18 '22 at 16:04
1

Having a parent with a `relative` position, contains any `absolute` positioned elements inside of it. Otherwise, the `absolute` positioning would be relative to body. – Jordan Dec 18 '22 at 16:10
Crystal-clear, thanks pal! – Dr. Gianluigi Zane Zanettini Dec 19 '22 at 14:27

Jdslk · Answer 2 · 2022-12-19T09:50:04.347

<style>
    #hero img {
        width: 100%;
    }

    #motto {
        position: relative;
        bottom: 272px;
        right: 0px;
        font-size: 5vw;
    }
</style>

<div id="hero">
    <img src="https://joshuakosamu.netlify.app/assets/img/jdslk/logos/icons/logo1.png">
    <div id="motto">This is my long, long text</div>
</div>

Problem:

First of all, to make the text remain in the desired position relative to the image's constant changing size calls for some complex css transformation. This is because you are trying to make the text constantly track a position on an image that it knows nothing about nor does it know the ever-changing viewpoint on the host device.

Solution 1:

Why not photoshop the image and write the text on the image. This way your text will always resize with the image, provided your text isn't dynamic

Solution 2:

Edit your css by setting the font-size: 5vw; as you've already stated and setting position: relative; so that your text can move somewhat relative to the <div id="hero"> containing your image.

See code snippet attached:

Please don't use blockquote formatting unless you are quoting someone else's text. If that's the case, please attribute the quotes. — Heretic Monkey, Dec 18 '22 at 15:04

score -1 · Answer 3 · answered Dec 18 '22 at 14:40

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style type="text/css">
        .container{
            position: relative;
            text-align: center;
              color: white;
        }
        .txt{
            position: absolute;
            top: 50%;
          left: 50%;
             transform: translate(-50%, -50%);

        }
    </style>
</head>
<body>
    <div class="container">
        <img src="lady.webp" alt="" srcset="">
         <div class="txt">Full stack developer</div>
    </div>
</body>
</html>

Thanks for your reply, but this is the result of you code https://postimg.cc/dkgxpw82 I really don't see how this can work anything different — Dr. Gianluigi Zane Zanettini, Dec 18 '22 at 14:48

How to put text over image in a fixed, responsive position with CSS/HTML?

3 Answers3