Я очень новичок в разработке и создании Front-end.

Я пытаюсь получить быть полноэкранным изображением, которое масштабируется быстро.

Может кто-нибудь сказать мне, что я делаю не так? Он правильно масштабируется, но не показывает полное изображение. Я также хотел сидеть над ним на мобильном устройстве - это возможно?

HTML:

   
     
       BleepBleeps
       A family of little friends<br>that make parenting easier
      
   

CSS:

.main-header {
    background-image: url(../img/bb-background2.png);
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    width: 100%;
    height: 100%;
}

h1.logo {
    text-indent: -9999px;
    height:115px;
    margin-top: 10%;
}