Oops! It appears that you have disabled your Javascript. In order for you to see this page as it is meant to appear, we ask that you please re-enable your Javascript!

css 背景画像

cssで背景画像を表示するコードと方法「コピペOK」

投稿日:2019年2月2日 更新日:

Pocket

うもチャーさん(@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の読み込み方法を3つ紹介「どれも簡単です」

 

こちらの記事を参照してください。

 

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で画像表示の番外編2:背景画像の全表示

 

で、もう一つ大事なので覚えておくといいのですが、

背景画像をちゃんといい感じに表示したい場合は、

 

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)

-css, 背景画像

スポンサードサーチ

関連記事

no image

字下げをcssでやる方法。1行だけ、複数行の字下げも対応

どうもチャーさんです。   あなたは字下げをcssでどうやればいいのか? と疑問に思ってませんか?   この記事では、cssを使い、 1行だけ字下げ、複数行を字下げする方法を、 書 …

no image

position:absoluteがレスポンシブでずれるのを解決する簡単な方法

どうも、チャーさんです。   あなたはposition:absoluteが、 レスポンシブにすると、ずれるということで、 困っていませんか?   画面サイズを変えるだけで、 位置が …

no image

max-widthとmin-widthの違いについてわかりやすく説明します

どうも、チャーさんです。 あなたはmax-widthとmin-widthの 違いについて疑問を持ってますか?   この記事では、max-widthとmin-width の違いを説明してるので …

no image

レスポンシブデザインを3秒で確認できる方法「各サイズ」

どうも、チャーさんです。   あなたは、レスポンシブデザインの確認方法を、 探していませんか?   この記事では、レスポンシブデザインを、 スマホサイズ、タブレットサイズ、pcサイ …

no image

absoluteとrelativeの違いがこれを読めば1目でわかりますよ。

  どうも、チャーさんです。   あなたはabsoluteとrelativeの違いがわからず、 困っていませんか?   またそのせいで、思ったように ページ制作に活用でき …

no image

wordpressのテーマのcssを編集する方法。3分でマスターできます。

どうも、チャーさんです。 あなたはwordpressのテーマのcssを編集したいですか?   この記事では、あなたの好きなように、 wordpressのcssを編集する方法を説明してます。 …

ワードプレスで文字の周りを線で囲う方法(コピペで一発でできます)

  どうもchamです。   あなたはワードプレスで記事を書いていて 囲いをつけたいと思ったことはありませんか?   ここに文字を入れる   こんな風に囲いをつ …

no image

ブートストラップを使う利点をわかりやすく説明します。習得方法も紹介。

  どうもチャーさんです。   あなたはブートストラップを使う利点は、 何だろうと思っていませんか?   css使えばデザインなんてできる、 何でわざわざブートストラップ …

no image

z-indexが効かない時の簡単な解決策。1行あれを足せば解決ですよ

z index 効かない   どうも、チャーさんです。   あなたはz-indexが効かないと、 困っていませんか?   ページ制作をしてて、 z-indexを書いたのに …

no image

cssで中央寄せ(縦に)したい場合にどうぞ

  どうも、チャーさんです。   あなたは縦に中央寄せできるcssを、 探していませんか?   この記事ではお手軽に縦の中央寄せができる、 cssを紹介しています。 &n …

no image

cssで画像を丸くする方法「15秒以内にできます」

どうも、チャーさんです。   あなたはcssで画像を丸くしたい、 そう思っていませんか?   この記事では、cssで画像を丸くする方法を、 書いています。   &nbsp …

no image

liタグを横並びにする方法。この方法なら15秒でできますよ。

どうも、チャーさんです。   あなたがliタグを横並びにしたい、 そう思っていませんか?     この記事では、liタグを横並びにする方法を、 書いています。 &nbsp …

no image

cssで文字色をつける方法とコードを紹介

どうも、チャーさん(@chaa___san)です。   あなたはcssで文字色を変えたい。 そう思っていませんか?   この記事では、cssで文字色をつける方法を、 まとめましたの …

no image

cssでボタンをレスポンシブ対応にする方法(微調整必要なしで楽ですよ)

どうも、チャーさんです。   あなたはcssでボタンをレスポンシブにしたい、 かつブレークポイントごとに微調整する手間ひまの、 必要のないボタンを作る方法はないかと思ってませんか? &nbs …

no image

cssで背景色を二色表示させる方法「コードつき」

どうも、チャーさんです。   あなたはcssで背景色を二色表示するには、 どうしたらいいんだろう? と思っていませんか。   この記事では、cssで背景色を二色 表示させる方法とコ …

最新記事

チャーさん

プログラミング・筋トレ・unity系の記事などを書いてます。

大学卒業後→開業→個人事業主7年目ぐらいです。webサイト制作したり、unityでゲーム開発しております。

youtubeもやってまして、主にプログラミング動画とかunity系の動画をあげてるので見てください。