Align text over background image-CodePudding

I have an image in that I want to place text over the top but in specific areas, the text is dynamic so can't be saved as a static image. And the image isn't the full width of the so i can't just fix it to 100% width.

I'm not sure if this is even possible. But I've been trying different things and although I can position text over it's very random in terms of the spacing.

I've tried multiple different ways, but can't get it to work consistently across different screen sizes. If I drag the screen onto a higher res then the text moves.

Within my CSS I have tried different spacing and positioning, like absolute or relative but can't get it to work.

.rank{
    position: absolute;
    bottom: 90px;
    left: 90px;
  }
  
.score {
    position: absolute;
    top: 90px;
    left: 90px;
  }
  .custom-container {
    position: relative;
    text-align: center;
    color: white;
  }

<div>
  <img src="https://placekitten.com/368/560" style="width:368;height:560px;" alt="scorecard">
  <div ><p >#1</p></div>
  <div ><p >135</p></div>
</div>

But I get the same issues. Is it possible to do?

CodePudding user response：

What you have to do is make the container display property to relative so that it is positioned relative to the body and make the text absolute . It makes the text to stick with the image exactly where you want.

You are adding position in pixels change it to relative value(%) . The main problem here is margin. You have to change it to relative value like 1% otherwise it will take a constant value. Comment down if you have any doubts. Thank you.

.container {
           
            margin: 3%;
            position: relative;
        
        }
        .container img
        {
       
        width:70%;
        height:60%;
        }
  
        .first-txt {
        font-size:0.5em;
        margin-top:1%;
            position: absolute;
            top: 0%;
            left: 1%;
            color:white;
        }
  
        .second-txt {
         font-size:0.5em;
        margin-bottom:1%;
            position: absolute;
            bottom: 2%;
            left: 1%;
            color:white;
        }

<!DOCTYPE html>
<html>
  
<head>
   
</head>
  
<body>
    <div >
        <img src="https://img.freepik.com/free-photo/wide-angle-shot-single-tree-growing-clouded-sky-during-sunset-surrounded-by-grass_181624-22807.jpg" >
        <p >
           your text
        </p>
          
        <p >
           your text
        </p>
    </div>
</body>
  
</html>

CodePudding user response：

You're using px for all your size unit. That would be fixed for all the screens. If you instead try using a variety of units, relative units like % for example would scale far better than absolute units.

https://www.w3schools.com/cssref/css_units.php This link may help explain as well