Text on image - how to make it responsive

Report · May 17, 2022

Hi. I figured out how to put text on an image. It is not a background image. Here is the code:

<body>
<div class="imagebanner">
<img src="images/happyfamily.jpg">
<div class="bannerdescription">
<p class="typicaltext">Treating Children with Trauma Attachment Issues </p>
</div>
</div>
</body>
</html>

Css-------------------

.typicaltext {

color: #000000;

font-family:Cambria, Cochin, Georgia, Times, 'Times New Roman', serif;

font-weight: bold;

font-style: italic;

text-align: left;

font-size: 22px;

}

.bannerdescription {

position: absolute;

top: 50px;

left: 50px;

}

.imagebanner{

position: relative;

}

img {

max-width: 100%;

max-height: auto;

}

---------------------------------------------------------------------------------------------------

Any ideas of how to make the text responsive? Does it have to be a background image?

Thanks

Report · May 17, 2022

You would just use media queries to change the size of the text font at a given breakpoint:

@media screen and (max-width: 768px) {

.typicaltext {

font-size: 18px;

}

@media screen and (max-width: 480px) {

.typicaltext {

font-size: 16px;

}

Report · May 18, 2022

Thank you. I will add them.

Report · May 19, 2022

Thank you. As the image gets smaller the text does too but it lays over the picture. Is there some css that would make the text wrap in the media queries?

Report · May 19, 2022

Thank you. As the image gets smaller the text does too but it lays over the picture. Is there some css that would make the text wrap in the media queries?

By @beng2000

Observe at what breakpoints (browser window width/s) the text starts to encroach upon the image and add more media queries until it works as desired.

To limit the width of the .typicaltext box add a media query using max-width at the point where the text encroaches upon the image, that will wrap the text into 2 lines:

@media screen and (max-width: 768px) {

.typicaltext {

max-width: 300px; /*Adjust to suit*/

line-height: 50px; /*Adjust to suit*/

}

Unfortunately this is all a bit trial and error when you have text that needs to fit into a limited space. Part of our job as developers is to be foreward thinking, so we either avoid the situation or accept the challenge, which usually means a bit more work will be involved.

Report · May 17, 2022

Use Viewport Units instead of pixels.

Here is working example with proper symantic markup.

https://alt-web.com/TUTORIALS/?id=responsive_text_overlays

CSS:
figure.overlay {    
position: relative;    
width: 100%;    
z-index: 1;  
}  
figure.overlay img {width: 100% }
    
figure.overlay figcaption {    
position: absolute;    
z-index: 1000;    
height: 100%;    
width: 100%;    
top: 0;  
/**optional background overlay**/    
background: rgba(255,255,255,0.2);  
/**text, adjust all values as desired**/    
padding: 57% 2% 0 2%;    
font-weight: 700;    
color: purple;  
/**some fallback value**/    
font-size: 16px;  
/**responsive size is roughly 3.4%  of the device's viewport width**/    
font-size: 3.4vw;  
}

HTML:
<figure class="overlay">      
<img src="https://placeimg.com/768/576/people/1" alt="person">
<figcaption> Figcaption<br>
Description<br> 
</figcaption> 
</figure>

Nancy O'Shea— Product User, Community Expert & Moderator

Report · May 17, 2022

Use Viewport Units instead of pixels.

Here is working example with proper symantic markup.
https://alt-web.com/TUTORIALS/?id=responsive_text_overlays

By @Nancy OShea

Using vw (viewport width) on its own to set the size of fonts usually results in the text being too small on a smartphone and too large on a wide screen, plus the text can't be zoomed if someone with poor eyesight needs to zoom the text to read it.

You're better off using clamp with a minimum/maximum size and a responsive size inbetween.

font-size: (1.5rem, 4vw, 2rem);

However having said that clamp currently only has about 90% browser support, so it's down to the individual to decide if that's enough to be of use in a production environment.

I personally still use media queries and px because I think it's more specific. When clamp gets to about 95% support I'll consider adopting it fully or though I'm unlikely to be using it in a production sense as I dont do this anymore.

Report · May 17, 2022

There are many ways to skin the proverbial cat.

We don't know which devices the OP is targeting or how much text they plan to use. Colors, font-styles and text-sizes can be adjusted as needed. I just like the simplicity & scalablity of Viewport Units over pixels.

That said, I mainly use calculations in production work.

selector {

font-size: calc(18px + 1vw);
line-height: calc(1.1em + 0.5vw);

}

Nancy O'Shea— Product User, Community Expert & Moderator

Report · May 18, 2022

You might find that using calc still presents font size issues particularly on smartphone. It's not that much better than using vw to control the font size, which should be avoided.

The best method will be clamp once it gets to about 95% browser support. For now l just set the text using px because its more controllable at the bottom and top end range. Yes it's more work producing a series of media queries and l know a lot of developers seem to have an allergic reaction when it comes to more work but it sorts out the wheat from the chaff so to speak, those that care and those that don't.

Report · May 18, 2022

Clamp sounds great. I will keep an eye on it. Thank you for your help.

Report · May 17, 2022

As a third alternative (adjust the value to suit)

<p class="typicaltext" style="font-size: 3.4vw;">Treating Children with Trauma Attachment Issues </p>

Treating Children with Trauma Attachment Issues

To see this working, reduce the width of the browser.

Wappler, the only real Dreamweaver alternative.

Report · May 22, 2022

I just wanted to chime in on this one.

Nancy was very right to steer you into using viewport and basically telling you to use dynamic font sizes. For Hero content and things like that this and Vectors are 100% the way to do it.

It still will mean media query work for sure but less of it but simply because position is also very subject. A mobile phone vertical a widescreen banner is simply not going to be the same so a more vertical version is what you likely will do.

One thing not really mentioned is ensuring z-index and Object fit.

If your not having an image as a background image (Which to be honest will work better) if that is a relative position you still need to give it a z-index and absolute positioned text a higher one to ensure it always its above it.

Object-fit will give you the ability to scale the image with similar options to having it as a background image.

Adobe Community

Text on image - how to make it responsive