Как мне разместить свой опыт на моем веб-сайте?

Question

Это мой код в индексе. html (заголовок)

<header id="header">
        <div class="container">
            <div class="row">
               <div class="col">
                   <div class="banner text-center">
                       <h1 class="display-1 text-capitalize w50 mx-auto">
                          <small>Welcome</small> <strong class="primary-color">The Rosa </strong>
                       </h1>

                       <a href="" class=btn main-btn my-4 text-capitalize"> Order Online </a>

                   </div>
               </div> 
            </div>
        </div>




        <a href="" class="btn header-link primary-color"><i class="fas fa-arrow-down"></i></a>
    </header>

И это в основном. css

.sub-headline{
    text-align: center;
    font-size: 8.5rem;
    font-family: 'Herr Von Muellerhoff', cursive;
    color: #c59d5f;
    font-weight: 100;
    line-height: .4;
    margin-top: 200 px;
    letter-spacing: 2px;
}
.first-letter{
    text-transform: uppercase;
    font-size: 10.3rem;
}
.display-1{
    color: black;
    font-size:3.7rem;
    font-family: 'Source Sans Pro', sans-serif;
    text-transform:uppercase;
    font-weight: 900;
    letter-spacing: .5rem;
}

Вот как я пытаюсь вставьте фон:

  #header{
    width: 100%;
    height:100%;
    background:url(../img/main-background-xs.jpg)
}

Но мое изображение: это не отображается так, как я хочу, а выглядит как это :

Ps: Это будет только первая страница моего сайта, когда я буду прокручивать вниз, я хочу иметь другой фон.

Answer 1

Вам нужно применить фон к телу, если вы хотите, чтобы он занимал весь кадр

body{
   background:url('your-image-url') ;
} 

Answer 2

Добавить background-size: 100% 100%; к div заголовка.