CODEWITHSUNDEEP
javascripthtmlcss
Husnain Mehmood
Husnain Mehmood

Reputation: 83

Positioning an image on top of text

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

Sample UI

Upvotes: 0

Views: 423

Answers (3)

Kameron
Kameron

Reputation: 10846

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>

Upvotes: 1

Orius
Orius

Reputation: 1093

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>

Upvotes: 0

Halit Uzan
Halit Uzan

Reputation: 54

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>

Upvotes: 0

Related Questions