どうもチャーさん(@chaa___san)です。
あなたはcssで背景画像を表示したいですか？
この記事ではcssで背景画像を表示する方法、
コード、あなた自身で背景画像の表示を操る方法を
書いておいたので、
cssで背景画像を表示したい場合、
下にスクロールして読んでみてください。
スポンサードサーチ
目次
cssで背景画像を表示させるコード
で早速ですが、
cssで背景画像をつけたい場合は、
background-image:url(“url名”);
を使いましょう。
これをcssで書いてあげると、
背景画像をつけることができます。
(話の途中ですが、
動画をとったので、動画で理解したい場合は、
どうぞ。)
話に戻ります。
で、ついでに、
background-size:cover;
もつけましょう。
これをつけることで背景にしたい画像が
いい感じに設置されます。
ということで、以下の記述を書いて
早速具体例をみていきましょう。
<style>
body {
background-image:url(“url”);
background-size:cover;
}
</style>
実行結果が以下です。
こんな風にちゃんと背景画像として、
表示されてますね。
さてというわけで、以下の記述、
body {
background-image:url(“url”);
background-size:cover;
}
をcssで書いてやることで、
背景画像を表示することができます。
スポンサードサーチ
cssで背景画像を表示する方法：詳細説明です。
でここからはもう少し入り込んで、
初学者向けに背景画像の表示の仕方をもう少し
詳しくみていきましょう。
cssで背景画像を表示するにはまずエディター
でcssで背景画像を表示するには、
まずはエディターを開きましょう。
cssで背景画像を表示するにはcssを準備
そしてエディターを開いたら、
cssを書きましょう。
ファイルを読み込んだり、
<style>タグを入れたりなどしてcssを準備してください。
cssの準備の仕方がわからない場合は、
僕が書いたcss準備の記事である、
こちらの記事を参照してください。
cssで背景画像を表示するためにテンプレ書きましょう。
そして、htmlのテンプレ的以下の記述を書きましょう。
<!DOCTYPE html>
<html>
<head>
<meta http-equiv=”Content-Type”=content=”text/html” charset=”UTF-8″>
<title></title>
</head>
<body>
</body>
</html>
それができたら、
cssで背景画像を表示するためコードを書きましょう。
cssの部分に
body {
background-image:url(“url”);
background-size:cover;
}
と書きましょう。
でこの（””）カッコの中の、
ダブルクオーテーションの間に、
あなたが表示したい画像のファイル名を書きましょう。
なので例えば、あなたのパソコンに保存されてる、
画像のファイル名が、test.jpgとかであれば、
background-image:url(“test.jpg”);と書きましょう。
そうすればその画像が背景画像として表示されます。
スポンサードサーチ
cssで画像表示の番外編：セレクタを選ぶ
また、cssで背景画像を表示する場合は、
どこに背景画像を表示するかも選びましょう。
このどこというのは、bodyの中なのか、
div内のクラスなのか、とかいう意味でして、
そこも選びましょう。
(このどこにcssを当てるかをセレクタと言います。)
例えば、僕のだした例ですが、
body {
background-image:url(“url”);
background-size:cover;
}
これはbodyタグに背景画像をつけてます。
なので背景画像いっぱいに画像が表示されます。
で、これはもちろんbodyタグ以外にも、
背景画像を設定できまして、<div>でクラス名を
つけた場合もその部分だけ画像を表示することもできます。
divで例を出してみますと、以下の感じです。
こんな風に、先ほどのbodyタグに
背景画像を表示したのとは違って、
divでクラス名をつけて、
そこでしていたエリア内に背景画像を
表示してます。
cssでは背景画像をこのようにタグを選んで、
表示できるので、少し難しいと思いますが、
これも選べるようになっておいてください。
スポンサードサーチ
cssで画像表示の番外編２：背景画像の全表示
で、もう一つ大事なので覚えておくといいのですが、
背景画像をちゃんといい感じに表示したい場合は、
body {
background-image:url(“url”);
background-size:cover;
}
のbackground-size:cover;を
忘れないようにしましょう。
これを書かないとどうなるかというと、
あれーさっきと表示され方が違いますね。
画像が全部表示されません。
でも、もちろんちゃんと同じ画像ファイルを使ってます。
で、これが
background-size:cover;の機能でして、
これを使うと、上の画像のように画像の一部しか
表示されないってことがなくなり、
画像が全部ちゃんと表示されるようになります。
こんな感じにです↓。
さて色々書きましたが、
これであなたはcssで背景画像を好きに、
表示できるでしょう。
スポンサードサーチ
まとめ
cssで背景画像をつけたい場合は、
body {
background-image:url(“url”);
background-size:cover;
}
とcssに書きましょう。
でurlのとこには画像のファイル名を書きましょう。
また、タグの部分は、
背景画像を表示させたい場所のタグや、
クラス名を書きましょう。
では読んでもらって、ありがとうございました。
それでは。
チャーさん(@chaa___san)
