I need help with positioning my text relative to the resizing image at different breakpoints. Can anyone assist with this?
Is there a way to position text relative to the background in a manner that it always stays attached to the image when resizing?
This is the HTML code snippet that I am currently using:
<section id="background1">
<!--Section to display content-->
<section id="content">
<figure><img class="img-fluid" src="../Others/wolf-wolves-snow-wolf-landscape-89773.jpeg" onclick="openModal()" class="hover-shadow"></figure>
<!--Display content-->
<p class="small">Sustainability</p>
<p class="big">Starts with<br> You</p>
<a href="../Website/about.html">Learn more!</a>
</section>
</section>
Below is the CSS code used to style the text:
@charset "UTF-8";
/*default*/
* {
padding: 0;
margin: 0;
box-sizing: border-box;
}
#background1 {
height: 600px;
background-color: #d3d3d3;
}
#content figure img {
position: relative;
width: 100%;
color: white;
}
#content .small {
position: absolute;
top: 45%;
left: 49%;
display: block;
text-align: center;
font-family: "EB Garamond", serif;
font-size: 2vw;
color: rgb(37, 37, 37);
transform: translate(-50%, -50%);
}
.big {
position: absolute;
top: 65%;
left: 49%;
display: block;
text-align: center;
font-size: 5vw;
font-family: "Montserrat", sans-serif;
font-weight: 600;
color: #fff;
transform: translate(-50%, -50%);
}
#content a {
position: absolute;
top: 90%;
left: 49%;
display: block;
padding: 5px;
border: 3px solid #2d1c8a;
border-radius: 80px;
text-align: center;
font-size: 2vw;
text-decoration: none;
font-size: 20px;
color: rgb(255, 255, 255);
background-color: #1e3094;
font-family: "Montserrat", sans-serif;
transform: translate(-50%, -50%);
}