How to make the h1 tag responsive to the background image (along with the background, the h1 tags shrinks & expand)

Question

I have a background image in the jumbotron along with h1 tags. As I resize the image, the h1 tags do not resize, and overlap with the image in the background

 .jumbotron h1 { font-size: 45px; } .jumbotron { background-image: url("header.jpg"); background-size: 100% 100%; background-repeat: no-repeat; margin-bottom: 0px; padding-top: 20px; padding-left: 48px; padding-right: 48px; } 

 <div class="container"> <!-- Jumbotron Header --> <div> <header class="jumbotron"> <h1> Hello, how May I help you.</h1> <h1>Happy to help you<br> <img src="prime.png" class="img-responsive" alt="flower"> </header> <div> </div> 

Answer 1

You will have to use javascript to shrink the font-size with the jumbotron.

If you are currently resizing the whole window to shrink the image, then you can just add the following:

window.addEventListener('resize', function() {

    var h1 = document.getElementById("jumbo-h1");  //I made up an id for simplicity
    var width = document.getElementsByClassName("jumbotron")[0].offsetWidth;

    if (width > 600) {
       h1.style['font-size'] = "45px";
    } else if (width > 400 && width <= 600) {
       h1.style['font-size'] = "35px";
    } else {
       h1.style['font-size'] = "25px";
    }
}

if you are using jQuery, this becomes much cleaner:

$(window).on('resize',function(){
    var $h1 = $(".jumbotron h1");         //note that ID is not needed
    var width = $(".jumbotron").width();
    if (width > 600) {
        $h1.css({"font-size": "45px"});
    } else is (width > 400 && width <= 600) {
        $h1.css({"font-size": "35px"});
    } else {
        $h1.css({"font-size": "25px"});
    }
});

Obviously, play with the sizes/cutoff points to your hearts content to get the look you are after.

If you are resizing the jumbotron in other ways, simply move the code in the handler I provided into its own function and call that when needed (while also passing a reference to the window resize handler)

Answer 2

I have two demos on Codepen that explore the concept of scaling text.

http://codepen.io/denmch/pen/MYZqXB

http://codepen.io/denmch/pen/EaGMYZ/

You can check the CSS and play with the concept on your own, but the basic idea is to calculate the font size using a combination of normal measures (em, rem, px…) and vw (viewport width-based measurement), which will produce a proportional text size that responds to the viewport. Here's an example:

h1 {
  font-size: calc(1rem + 3.5vw);
}

This idea has also been explored by Mike Riethmuller who has done a lot of great work and even apparently has videos on the subject.

It's considered experimental, but you should be good everywhere but Opera Mini.