More than 1 year has passed since last update.

背景画像について

Posted at 2023-05-25

今日はprogeteをやって出てきたCSSについての備忘録として記事を書いていこうと思います。

背景画像を指定する

CSSで背景画像を設定するには　　
background-imageを使用する。

stylesheet.css

div {
    background-image: url(top.png);
}

これで背景画像の挿入はできました。

background-imageで指定された背景画像は表示範囲を埋め尽くすまで繰り返し表示される性質があります。

そこで、、、
background-size: cover;
を指定してあげると1枚の画像で表示範囲を埋め尽くすように画像の大きさが拡大縮小してくれます。

stylesheet.css

div {
    heigth: 200px
    background-image: url(top.png);
    background-size: cover;
}

これで画像の配置は完了しました。

今回はここまで！
ありがとうございました。