How to make text relative to background using HTML/CSS?

Question

I have made it so that my background image scales to fit the size of the viewport. Now, I want the text to scale relative to the background image. Note: I am using the <img> tag for the background image because this allows for scaling with smaller browser windows (i.e., mobile devices).

CSS

img.bg
{
    min-height: 100%;
    min-width; 781;

    width: 100%;
    height: auto;

    top: 0;
    left: 0;

    position: absolute;
    z-index: 1;
}

@media screen and (max-width: 781)
{
    img.bg
    {
        left: 50%;
        margin-left: -390.5;
    }
}

#container 
{
    position: relative;
    top: 0px;
    width: 781;
    height: 758;
    border: 1px solid black
    z-index: 2;
}

#left
{   
    position: relative;
    left: 1.280409731113956%;
    top: 14.51187335092348%;
    padding-top: 10px;
    padding-left: 10px;
    padding-right: 10px;
    width: 50%;
    height: 50%;
    z-index: 2;
}   

p
{
    font: 14px Georgia;
    color: #FFFFFF;
}

HTML

<img class="bg" src="background.jpg">

<div id="container">
<div id="left">
    <p>Text</p>
</div>
</div>

Yes, but aligned with the background and in the format I set it up to be in. — myom, Jul 18 '12 at 15:34
If you set up your text sizes using percentages or EMs it will automatically scale. WOrth a shot but may not do exactly what you're wanting it to do. — Billy Moat, Jul 18 '12 at 15:41

score 0 · Answer 1 · answered Jul 18 '12 at 15:39

You can't scale text dynamically in this way with css alone as far as I know.

you might be able to do it with jQuery if you make the selected font-size proportional to window.innerWidth using something like this.

function resizeText(event) {
       //your text element
       var $text = $('h2');

       if(window.innerWidth <= 781){

           //font scaling ratio
           var  fontSize = window.innerWidth/100;             
           $text.css('font-size', fontSize+'px');   

       } else {
           $text.css('');
       }
}

  //run above on window load and resize events
  window.onresize = resizeText;
  window.onload = resizeText;

I'm not very familiar with using jQuery. What exactly do I do with that above code? — myom, Jul 18 '12 at 15:47
jQuery is a common javascript library the documentation is here http://docs.jquery.com/Main_Page — Ollie, Jul 18 '12 at 15:49

score 0 · Answer 2 · edited May 23 '17 at 12:20

0

Are you doing all your text or just headings? You might want to look into "Fittex" or "Bigtext".

You can do it with strictly using CSS and Media Queries.

I also saw another method on here a few days ago with someone's method to do it strictly with CSS and without media queries.

Also check out this post: Is it possible to dynamically scale text size based on browser width?

edited May 23 '17 at 12:20

Community

1
1

answered Jul 18 '12 at 16:05

matt

1,015
4
14
28

Please provide a better context for "Fittex" or "Bigtext". Are they CSS properties, JS libraries, we don't know... a link would be much more helpful. – Andy Preston May 24 '22 at 12:13

How to make text relative to background using HTML/CSS?

2 Answers2