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

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

CodePudding user response：

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>

CodePudding user response：

<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:

CodePudding user response：

<!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 >
        <img src="lady.webp" alt="" srcset="">
         <div >Full stack developer</div>
    </div>
</body>
</html>