【模写】iSaraサイト模写 イントロダクション編


こんにちは、すずです。

現在、フロントエンドエンジニアの大定番「iSara」のサイト模写をやっています。
そこで得た知識をブログにアウトプットしていこうと思います。

では、早速参りましょう!

【模写】iSaraサイト模写 イントロダクション編

  • 制作時間:2H
  • 作業:テキスト・背景画像追加、「」作成、文字に下線追加、丸いABOUT作成

つまづいた部分とその解決法

背景画像の導入

【模写】iSaraサイト模写 トップ編 同様に、まずは背景の画像を取得する必要があります。

取得方法については、ここでは割愛させていただきます。

まずは、下記のようにHTMLを書いて、

<div class=“intro”></div>

CSSをこのように書きます。

.intro {
  background-imageurl(../img/introbottom.jpg);
  background-sizecover;
}

そうすると・・・

赤枠のところに画像が出るはずが、出ていません(ToT)

これの解決法がこちら。

CSSに、

.intro {
  background-imageurl(../img/introbottom.jpg);
  background-sizecover;
  height: 540px;
  background-position: center;
}

height: 540px;」「background-position: center;」を足してあげると・・・

無事に背景画像が表示されました。