Skip to main content
B
beng2000
Known Participant
May 17, 2022
Question

Text on image - how to make it responsive

  • May 17, 2022
  • 4 replies
  • 1079 views

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
    This topic has been closed for replies.

    4 replies

    Liam Dilley
    Liam Dilley
    Inspiring
    May 23, 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.

      BenPleysier
      Community Expert
      BenPleysierCommunity Expert
      Community Expert
      May 18, 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 is the DMXzone-made Dreamweaver replacement and includes the best of their powerful extensions, as well as much more!
        Nancy OShea
        Community Expert
        Nancy OSheaCommunity Expert
        Community Expert
        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
        O
        osgood_
        Legend
        May 17, 2022
        quote

        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.

          Nancy OShea
          Community Expert
          Nancy OSheaCommunity Expert
          Community Expert
          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
          O
          osgood_
          Legend
          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;
          }
          }
          B
          beng2000Author
          Known Participant
          May 18, 2022

          Thank you. I will add them.

           

          Terms & ConditionsAccessibility statement
          Using the community Terms of use Privacy Cookie preferences Do not sell or share my personal information ad choicesAdChoices