I'm encountering some difficulty in finding the right approach to pose this question, but my current task involves loading text on top of an image. This seems quite challenging, but I managed to achieve it by following a tutorial found here. However, the tutorial is outdated and does not provide guidance on dynamically adjusting both font size and span size for mobile devices while keeping the text correctly positioned over the image.
When resizing the window, the text and box do not scale properly and end up overflowing outside of the image boundaries.
Despite trying percentage sizing and other techniques, I have been unsuccessful in resolving the issue. Below is the CSS code I am currently using to overlay text on the image with a background:
What is considered the best practice for placing text on top of an image and ensuring its responsiveness? For desktop browsers, I am employing the following code:
.herotext span {
position: absolute;
top: 80%;
font-family: 'museo_slab500';
font-size: 150%;
color: #fff;
padding-left: 20px;
width: 40%;
line-height: 35px;
background: rgb(0, 0, 0);
background: rgba(0, 0, 0, 0.7);
}
If anyone has insights on how to address this issue effectively in contemporary web design, I would greatly appreciate your advice. The referenced article dates back to 2009, suggesting that there may be better methods for overlaying text on images nowadays.