How to set correctly a big title which works on desktop and mobile as well? [on hold]

I'm working on webpage main title. I want to set a 100% height background image and a big title on the front of it. This is how I did:

In the CSS file:

body, html {
  height: 100%;
}

.bg {
  background-image: url("../img/image.JPG");
  height: 100%;

  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;    
}

.bigtitle {
     /**    padding-left:15%;***/ 
        padding-top: 20%;

    color: white; 
    font-family: 'Trocchi', serif; 
    font-size: 1500%; 
    font-weight: normal; 
    margin: 0;

    /*line-height: 1.0em;*/
}

In HTML file:

<div class="bg">
    <center><h1 class="bigtitle">My title</h1></center>
</div>

This is good on the desktop but completely fail on mobile or small screen size. How can do to work on mobile and on desktop as well?

Tags: