Issue
I am not well-versed with CSS and can't figure out how to keep a text block overlay relative to the width of my image. When I change the image width from 100% to 50%, the text block stays where it's at instead of staying "inside" the image.
This is the code I'm using:
.container {
position: relative;
font-family: Arial;
}
.text-block {
position: absolute;
bottom: 20px;
right: 20px;
background-color: black;
color: white;
padding-left: 20px;
padding-right: 20px;
}<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<div class="container">
<img src="https://xofarragio.com/resources/graphics/placeholder_1920x1280_01.png" alt="Nature" style="width:100%;">
<div class="text-block">
<h4>Testing</h4>
<p>This is a test</p>
</div>
</div>
</body>
</html>Solution
Well, it's because your text-block div is positioned absolute to the container div, and so it is only when that element changes that the text-block div will respond. You can simply change this by changing the with of the container element, as that is the parent that controls the position of the text-block
This is the code:
.container {
position: relative;
font-family: Arial;
width: 50%; /* only line added. Change wight here instead of in img*/
}
.text-block {
position: absolute;
bottom: 20px;
right: 20px;
background-color: black;
color: white;
padding-left: 20px;
padding-right: 20px;
}<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<div class="container">
<img src="https://xofarragio.com/resources/graphics/placeholder_1920x1280_01.png" alt="Nature" style="width:100%;">
<div class="text-block">
<h4>Testing</h4>
<p>This is a test</p>
</div>
</div>
</body>
</html>
Edit:
Answering your commented question,
- To center the image on the page, you can add a wrapper div on top of the container that will take up 100% of the width, and then it would center the
.containerdiv. Changes to html:
<div class="wrapper">
<div class="container">
...rest of the code
</div>
</div>
Changes to CSS:
.wrapper{
width: 100%;
display: flex;
justify-content: center;
}
- To move the text box anywhere at all, you can just change the
top,right,bottom, andleftproperties of the.text-blockselector. so moving to the top right will be like so:
.text-block {
/* ... */
top: 20px;
right: 20px;
/* ... */
}
and bottom left will be so:
.text-block {
/* ... */
bottom: 20px;
left: 20px;
/* ... */
}
do you get the idea?
This is what it looks like:
.wrapper {
width: 100%;
display: flex;
justify-content:center;
}
.container {
position: relative;
font-family: Arial;
width: 50%;
/* only line added. Change wight here instead of in img*/
}
.text-block {
position: absolute;
top: 20px;
right: 20px;
background-color: black;
color: white;
padding-left: 20px;
padding-right: 20px;
}<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<div class="wrapper">
<div class="container">
<img src="https://xofarragio.com/resources/graphics/placeholder_1920x1280_01.png" alt="Nature" style="width:100%;">
<div class="text-block">
<h4>Testing</h4>
<p>This is a test</p>
</div>
</div>
</div>
</body>
</html>Answered By - Izebeafe
0 comments:
Post a Comment
Note: Only a member of this blog may post a comment.