0

How can I position an image on top text. Like in the image given

Sample UI

Husnain Mehmood
  • 83
  • 7
  • Does this answer your question? [How to position text over an image with CSS](https://stackoverflow.com/questions/8708945/how-to-position-text-over-an-image-in-css) – isherwood Feb 11 '22 at 19:16
  • Please see [ask]. You're expected to make an effort and show it here. Also, this question has been asked and answered dozens of times. Please search first. – isherwood Feb 11 '22 at 19:20
  • I provided the image and asked the question. Others answered. I checked out questions that were similar and did not find an answer which is why I asked again. – Husnain Mehmood Feb 11 '22 at 19:39

3 Answers3

1

Here is a basic example using flex. I put a border on the div so you can see exactly what the flex does. Also, for an example like this where you want the image to be directly over text, you have to lookout for default margins/padding. For example, the <p> element has a default margin which I set to 0.

.row {
  display: flex;
  flex-direction: column;
  border: solid 1px black;
  width: 200px;
  height: 80px;
  padding: 20px;
  background-color: #1e3f5a;
}


p {
  margin: 0; /* removes default p margin */
  text-align: center;
  font-size: 30px;
  color: white;
}

img {
  align-self: flex-end;
  margin-right: 1.5rem; /* optional */
}
<div class="row">
  <img src="https://dummyimage.com/55x25/ed7014/fff&text=Trending">
  <p>Dex Activity</p>
</div>
Kameron
  • 10,240
  • 4
  • 13
  • 26
0

There is more than one technique.

Here's one, borrowed from w3schools:

<!DOCTYPE html>
<html>

<head>
  <style>
    .container {
      position: relative;
    }
    
    .topright {
      position: absolute;
      top: 8px;
      right: 16px;
      font-size: 18px;
    }
    
    img {
      width: 100%;
      height: auto;
      opacity: 0.3;
    }
  </style>
</head>

<body>

  <h2>Image Text</h2>
  <p>Add some text to an image in the top right corner:</p>

  <div class="container">
    <img src="img_5terre_wide.jpg" alt="Cinque Terre" width="1000" height="300">
    <div class="topright">Top Right</div>
  </div>

</body>

</html>
Kameron
  • 10,240
  • 4
  • 13
  • 26
Orius
  • 1,093
  • 5
  • 11
  • This is text on top of image – Husnain Mehmood Feb 11 '22 at 18:56
  • The same technique is also good for image on top of text. The key is to have a container with `position: relative` (or actually any value), and then `position: absolute` of the child element (image, in your case) takes effect. – Orius Feb 11 '22 at 19:00
0

You can also use the position css property for this, you can wrap these two tags with a div and use the css flex methods.

CSS Flex Example:

<div style="display:flex; flex-direction:column"><img src="IMG_URL" alt="..." style="align-self:flex-end"><p>Dex Activity<p/></div>
Halit Uzan
  • 34
  • 3