網站中最重要的主視覺大圖，大部分會落在 header 上，今天就來寫個 header 吧!!
預計會長這樣

HTML 的寫法很簡單，如下方

 <div class="header">
 先命名一個 header 標籤，就是要放進圖片的位置
        <div class="container">
        限制跟 navbar 一樣的寬度，這樣文字內容看起來才會比較一致
            <div class="text-area">
            文字背景的範圍寫在文字外層
                <div class="text">
                    <h1 class="title">
                        永垂不朽的鐵人經典
                    </h1>
                </div>
            </div>
        </div>
    </div>

SCSS會長這樣

.header{
    background-image: url(https://images.unsplash.com/photo-1470229722913-7c0e2dbbafd3?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1350&q=80);
    在 [unslash 網站](http://https://unsplash.com/) 找到一張圖片
    max-width:100%;
    height: 420px;
    background-repeat: no-repeat;
    background-size:cover;
    background-position: center center;
    用 background-image 要設定高度，才會顯示，寬就設定 max-width: 100%，讓圖片佔滿畫面，
    並不使背景重複，讓圖擺在範圍正中央，
    
    .text{
        text-align:center;
        將文字對齊置中
    }
  }

  .text-area{
      padding-top: 150px;
      使文字區域在 haader 中向上推擠
  }

  .text{
    margin:0 auto; 使這個範圍在畫面置中
    color:#fff;
    background-color: #000;
    opacity:0.6;
    padding:2em;
       .title{
        font-size:50px;
        font-weight: bold;
        設定文字大小與粗細度
               }
  }

今天寫的比較簡單，原始碼在這裡
https://codepen.io/hnzxewqw/pen/aboEQEe