こんにちは、すずです。
現在、フロントエンドエンジニアの大定番「iSara」のサイト模写をやっています。
そこで得た知識をブログにアウトプットしていこうと思います。
では、早速参りましょう！
【模写】iSaraサイト模写 イントロダクション編
[box class=”blue_box”]
- 制作時間：2H
- 作業：テキスト・背景画像追加、「」作成、文字に下線追加、丸いABOUT作成
[/box]
つまづいた部分とその解決法
背景画像の導入
【模写】iSaraサイト模写 トップ編 同様に、まずは背景の画像を取得する必要があります。
取得方法については、ここでは割愛させていただきます。
まずは、下記のようにHTMLを書いて、
[box class=”white_box”]
<div class=“intro”></div>
[/box]
CSSをこのように書きます。
[box class=”white_box”]
.intro {
background-image: url(../img/introbottom.jpg);
background-size: cover;
}
[/box]
そうすると・・・
赤枠のところに画像が出るはずが、出ていません(ToT)
これの解決法がこちら。
CSSに、
[box class=”white_box”]
.intro {
background-image: url(../img/introbottom.jpg);
background-size: cover;
height: 540px;
background-position: center;
}
[/box]
「height: 540px;」「background-position: center;」を足してあげると・・・
無事に背景画像が表示されました。
