~パンピーサラリーマンの為の人生逆転ブログ~

【CSS】background-imageとは?~背景画を設定する方法~ | MUKKUN QUEST
MUKKUN QUEST     

【CSS】background-imageとは?~背景画を設定する方法~

HTML&CSS

【CSS】background-imageの解説です。読み方は「バックグラウンドイメージ」
背景の画像を変更する方法を知りたい方はこちらで解決します💡

スポンサードサーチ

【CSS】background-image ~背景画を変更する方法~

具体的に解説していきます。

【実例】background-imageはこう打てば、こうなる


☝CSSにこのように打つことで、URLの画像が背景画に設定されます。

【特徴】background-imageの持つ特徴

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

background-size

1枚の画像で表示範囲を埋めたい場合は、☝このように打ち込むと、☟ご覧のように1枚の画像で範囲をカバーするように表示されます。

【注意】background-imageを使う時に起こりやすいミスの事例

●画像を挿入する機能はHTMLの< img >タグの印象が強いですが、これはあくまで、指定した範囲の背景に、CSSで画像を指定しているので、使い道の違いに注意。
●他のCSSとは若干違い、URL()という入力が出てくるので忘れないよう注意。
●URLの後のカッコが全角にならないよう注意。

background-imageに似た効果を持つCSS

●< img > ・・・画像を挿入する方法(HTML)