0
210
ViewsPositioning an image on top of text
How can I position an image on top text. Like in the image given
·
Juan Pablo Isaza
3 answers
Answer question0
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>
·
Juan Pablo Isaza
Report
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>
·
Juan Pablo Isaza
Report
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>
·
Juan Pablo Isaza
Report
Answer question