CSSで背景を設定！背景画像や背景色のカスタマイズ方法

この記事では CSSで背景の色を変えたり、背景に画像を設定する方法を解説します。

ラムネ

背景色や背景画像の設定はとてもよく使われ、WEBサイトを制作する上では欠かせない項目となります。必ず覚えておきましょう！

この記事を読むことで、下記のポイントについて理解できると思います。

• 背景画像・背景色の設定方法が理解でき、実行できる
• 背景画像の様々なオプションが理解できる

ラムネ

基本的な使い方は難しくありません。ただ、微調整を加えようとすると設定する項目が多くなるので、難易度は少し上がります。

CSSで背景色を設定する方法

背景色を設定するにはbackground-colorプロパティを使います。記述方法は下記の通り。

background-color: カラーコードまたはカラーネーム;

値にはカラーコードやカラーネームで好みの色を指定します。

くま

カラーコードやカラーネームってなんだ

ラムネ

カラーコードは、#121212などのように、色に割り当てられてる番号のことだよ。カラーネームは(代表的な色に限るけど)redやblueなどのように、色に付けられた名前のこと。どっちで指定しても大丈夫だよ。

カラーコードやカラーネームについては下記の記事で解説しているので参考にしてみてください。

参考記事

CSSで文字色を変更する方法！colorの使い方をサンプルで解説

この記事では、文字の色の変更方法を解説します。 文字色はサイトの読みやすさや、イメージを左右する大切な要因の一つです。一色だけのサイトより適度に色分けされていた方が読みやすくなります。 この解説のゴールは以下を目指してい ...

背景色を変更してみよう

実際に背景色を変更してみましょう。

<div id="demo_48">
   <p>この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。</p>
 </div>

#demo_48{
   background-color: tomato;
 }

divに背景色を設定しています。div全体に背景色がついているのが確認できます。

文字に背景色を設定

もし文字の部分の背景色を変えたければ、pにスタイルを設定しましょう。

<div>
   <p id="demo_49">この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。</p>
   <p>この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。</p>
</div>

#demo_49{
   background-color: tomato;
 }

文字に背景色が設定されました。p要素だけでなく、あらゆる要素に背景色を設定することができます。

文字に背景色を設定する場合は、読みづらくならないように、文字色にも気をつけましょう。文字色の変更については下記の記事で解説しているので参考にしてみてください。

参考記事

CSSで文字色を変更する方法！colorの使い方をサンプルで解説

この記事では、文字の色の変更方法を解説します。 文字色はサイトの読みやすさや、イメージを左右する大切な要因の一つです。一色だけのサイトより適度に色分けされていた方が読みやすくなります。 この解説のゴールは以下を目指してい ...

paddingの背景はどうなる？

要素にpaddingやmarginがあった場合、背景色はどこまで適用されるのでしょうか？正解は以下のようになります。

• paddingは背景が適用される
• marginは背景が適用されない

そういう仕様になっているので丸暗記しましょう。

詳細はボックスモデルについて詳しく学ぶ必要があるので興味がある方は参考にしてみてください。

参考記事

【css】marginとpaddingの使い方や違いを解説

この記事ではCSSのmargin(マージン)とpadding(パディング)について、それぞれの使い方や違いをわかりやすく解説していきます。 marginもpaddingも余白を設定するためのプロパティですが、要素のどこに ...

CSSで背景画像を設定する方法

背景に画像を設定するにはbackground-imageプロパティを使います。

background-image: url("画像のパス");

画像のパスには、画像ファイルの場所を指定します。絶対パスでも相対パスでも構いません。

相対パスの場合は、CSSファイルからの相対パスを指定する必要があります。index.htmlからの相対パスではないので注意しましょう。

くま

パス・・・ってなんだ？

ラムネ

パスはファイルの場所のことだよ。パスの指定の仕方にもいくつかの種類があるんだ。

パスに関しては下記記事で解説しているので、詳しくはそちらを参考にして下さい。

参考記事

パスの指定方法について

背景画像を設定してみよう

実際に背景画像を設定してみましょう。。

 <div id="demo_50-1">
   <p id="demo50-2">この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。この文章はダミーです。文字の大きさ、</p>
 </div>

#demo_50-1{
   padding: 30px;
   background-image: url("http://wunderstand.net/wp-content/uploads/2019/06/01.jpg");
 }

背景に画像が表示されましたね。ちなみに今回は絶対パスで指定しています。基本的にはこれだけで背景画像を設定することが可能です。

ちなみに背景画像が小さい場合は繰り返され、左上を基準として表示されます。どちらもCSSで後から変更できます。

背景画像のオプション

背景画像を単純に表示するだけあれば簡単なのですが、位置やサイズなど様々な指定をしたいことが多いでしょう。そのような場合に備えてあらゆるオプションが取り揃えられています。

ここではその中でも代表的な4つを覚えましょう。

背景画像の繰り返し

background-repeat

背景画像のサイズ

background-size

背景画像の開始位置

background-position

背景画像の固定・移動

background-attachment

背景画像の繰り返し設定

背景画像の繰り返しの方法を設定するには、background-repeatプロパティを使用します。

background-repeat: 繰り返しの指定;

指定する値には以下のようなものがあります。

repeat

全方向にリピートして表示します。初期値はこの状態

repeat-x

X方向、つまり横方向にだけリピートします。

repeat-y

Y方向、つまり縦方向にだけリピートします。

no-repeat

リピートはしません。

ちょっと文章だけではわかりづらいので、実際にどうなるかみてみましょう。

<p>repeatの場合</p> 
<div id="demo_51-1" class="demo_51"></div>
<p>repeat-xの場合</p> 
<div id="demo_51-2" class="demo_51"></div>
<p>repeat-yの場合</p> 
<div id="demo_51-3" class="demo_51"></div>
<p>no-repeatの場合</p> 
<div id="demo_51-4" class="demo_51"></div>

 #demo_51-1{
   background-repeat: repeat;
 }
 #demo_51-2{
   background-repeat: repeat-x;
 }
 #demo_51-3{
   background-repeat: repeat-y;
 }
 #demo_51-4{
   background-repeat: no-repeat;
 }

.demo_51{
   width: 500px;
   height: 200px;
   background-color: #dadada;
   margin-bottom: 10px;
   background-size: 50px;
 background-image: url("http://wunderstand.net/wp-content/uploads/2019/06/01.jpg");
 }

background-repeatプロパティの値を変更することで、繰り返す方向が変化しているのがわかりますね。

ちなみに初期値がrepeatになっているので、何も指定しなければ、縦・両方にリピートされます。リピートさせたくない場合はno-repeatに設定しましょう。

背景画像のサイズを調整

背景画像のサイズを調整するには、background-sizeプロパティを使用します。

background-size: サイズ;

サイズは縦幅や横幅を数値で指定するパターンと、キーワードで指定するパターンがあります。

auto

初期値です。画像のオリジナルサイズが設定される

contain

背景画像の縦横比は保持しつつ、横幅と高さの両方が収まるサイズで表示

cover

背景画像の縦横比は保持しつつ、要素を全体を覆い尽くすように表示

数値(px ・ em)

指定した大きさで表示

数値(%)

要素の割合で指定

autoの例

初期値はautoになります。背景画像は元のサイズで表示されます。

<div id="demo_52"></div>

 #demo_52{
   height: 200px;
   background-color: #ffe6e6;
   background-image: url("http://wunderstand.net/wp-content/uploads/2019/06/01.jpg");
   background-size: auto;
 }

containの例

背景画像の縦横比は保持しつつ、横幅と高さの両方が収まるサイズになります。領域内に背景画像が少なくても1つは表示されるようになります。リピートが設定されていればリピートされます。

ラムネ

要するに、はみ出さない範囲で一番大きく表示されます。

<div id="demo_53"></div>

 #demo_53{
   height: 200px;
   background-color: #ffe6e6;
   background-image: url("http://wunderstand.net/wp-content/uploads/2019/06/01.jpg");
   background-size: contain;
 }

背景画像を全部見せたい場合に使う良いでしょう。

coverの例

背景画像の縦横比は保持しつつ、要素を全体を覆い尽くすように表示します。

<div id="demo_52"></div>

 #demo_52{
   height: 200px;
   background-color: #ffe6e6;
   background-image: url("http://wunderstand.net/wp-content/uploads/2019/06/01.jpg");
   background-size: cover;
 }

背景を画像で埋め尽くしたいときに使うと良いでしょう。

数値(px・em)の例

指定した大きさで表示されます。1つ目の値は背景画像の横幅、2つ目の値は背景画像の高さになります。

<div id="demo_55"></div>

 #demo_55{
   height: 200px;
   background-color: #ffe6e6;
   background-image: url("http://wunderstand.net/wp-content/uploads/2019/06/01.jpg");
   background-size: 50px 50px;
 }

1つだけ指定した場合はその値が横幅になり、高さは縦横比を保持して自動的にリサイズされます。

<div id="demo_56"></div>

 #demo_56{
   height: 200px;
   background-color: #ffe6e6;
   background-image: url("http://wunderstand.net/wp-content/uploads/2019/06/01.jpg");
   background-size: 50px;
 }

数値と一緒にautoを指定することも出来ます。autoを指定すると、縦横比を維持してリサイズされるので、横幅だけ、もしくは高さだけを指定したいという場合に便利です。

<div id="demo_57"></div>

 #demo_57{
   height: 200px;
   background-color: #ffe6e6;
   background-image: url("http://wunderstand.net/wp-content/uploads/2019/06/01.jpg");
  background-size: auto 50px;
 }

数値(%)の例

背景を設定する要素の割り合いを指定します。

1つ目の値は要素の横幅に対しての割合、2つ目の値は要素の高さに対しての割合となります。例を見てみましょう。

<div id="demo_58"></div>

 #demo_58{
   height: 200px;
   background-color: #ffe6e6;
   background-image: url("http://wunderstand.net/wp-content/uploads/2019/06/01.jpg");
   background-size: 50%  50%;
 }

上記の例の場合、高さも横幅も50%を指定しているので、それぞれ半分のサイズになります。

背景画像の位置を調整

背景画像はデフォルトでは左上から始りますが、その位置を変更することもできます。

背景画像の位置を調整するにはbackground-positionプロパティを使います。

background-position: 横の位置 縦の位置;

値には数値で指定するパターンとキーワードで指定するパターンがあります。

1つ目の値で横の位置を、2つ目の値で縦の位置を指定します。1つだけ指定した場合はもう一方はcenterとみなされます。

キーワードで指定(横方向)

left / center /rightのいずれかで指定

キーワードで指定(縦方向)

top/ center / bottomのいずれかで指定

数値(px)

要素の左上からの位置をpxで指定

数値(%)

要素の左上からの位置を％で指定

キーワードで指定

横の位置ををleft / center /rightのいずれかで、縦の位置をtop/ center / bottomのいずれかで指定します。

それぞれのキーワードは、背景画像の場所を指しています。

• left…左
• right…右
• center…真ん中
• top…上
• bottom…下

実際の例を見てみましょう。

<p>left bottomの場合</p>
<div id="demo_59" class="demo_59-1"></div>
<p>centerの場合</p>
<div id="demo_59" class="demo_59-2"></div>
<p>rightの場合</p>
<div id="demo_59" class="demo_59-3"></div>

.demo_59-1{
   background-position:left bottom;
 }
 .demo_59-2{
   background-position:center;
 }
 .demo_59-3{
   background-position:right;
 }
 #demo_59{
   height: 200px;
   background-color: #dadada;
   background-image: url("http://wunderstand.net/wp-content/uploads/2019/06/01.jpg");
   background-size: 150px auto;
   background-repeat: no-repeat;
   margin-bottom:10px;
 }

• 1つめはleftとbottomを指定しているので、左・下から背景が適用されています。
• 2つめはcenterを1つだけ指定しています。省略されたほうはcenterになるので、center centerとみなされ、縦横ともに中央から表示されています。
• 3つめはrightを1つだけ設定しています。省略されたほうはcenterになるので、right　centerとみなされ、背景が右・中から表示されています。

数値(px)で指定

画像の位置を左上からの数値で指定します。省略された方はcenterとみなされます。

実際の例を見てみましょう。

<div id="demo_60" class="demo_60-1"></div>
<div id="demo_60" class="demo_60-2"></div>

 .demo_60-1{
   background-position:10px;
 }
 .demo_60-2{
   background-position:50px 100px;
 }

 #demo_60{
   height: 200px;
   background-color: #dadada;
   background-image: url("http://wunderstand.net/wp-content/uploads/2019/06/01.jpg");
   background-size: 150px auto;
   background-repeat: no-repeat;
   margin-bottom:10px;
 }

• 1つめは10pxを指定しています。省略されたほうはcenterになるので、横は左上から10px、縦は中央に表示されています。
• 2つめは50pxと100pxを指定しているので、左上から横50px、縦100pxの位置に表示されています。

数値とキーワードで指定

数値とキーワードをミックスして指定することも出来ます。

<div id="demo_61" class="demo_61-1"></div>

 .demo_61-1{
   background-position:50px bottom;
 }
 #demo_61{
   height: 200px;
   background-color: #dadada;
   background-image: url("http://wunderstand.net/wp-content/uploads/2019/06/01.jpg");
   background-size: 150px auto;
   background-repeat: no-repeat;
   margin-bottom:10px;
 }

上記の例の場合、50px bottomを指定しているので、横は左上から50pxの位置、縦は底辺に表示されています。

数値(%)で指定

%で指定した場合は、「0％ 0%」で左上から表示、「100% 100%」で右下に表示、「50% 50%」では真ん中表示となるような割合で計算されて表示されます。

実際に例を見てみましょう。

 <div id="demo_62" class="demo_62-1"></div>
 <div id="demo_62" class="demo_62-2"></div>
 <div id="demo_62" class="demo_62-3"></div>

.demo_62-1{
   background-position:0% 0%;
 }
 .demo_62-2{
   background-position:50% 50%;
 }
 .demo_62-3{
   background-position:100% 100%;
 }

 #demo_62{
   height: 200px;
   background-color: #dadada;
   background-image: url("http://wunderstand.net/wp-content/uploads/2019/06/01.jpg");
   background-size: 150px auto;
   background-repeat: no-repeat;
   margin-bottom:10px;
 }

• 1つめは0% 0%を指定しているので左上表示になっています。
• 2つめは50% 50%を指定しているので真ん中表示になっています。
• 3つめは100% 100%を指定しているので右下表示になっています。

背景画像のスクロール設定

background-attachmentプロパティを使うことで、背景をスクロールさせるか、固定させるか指定することが出来ます。

下記のような値を取ります。

scroll

初期値です。背景画像は固定されずスクロールさせます。

fixed

背景画像が固定されます。

文書だけではわかりづらいと思うので実例を見てみましょう。

 <div id="demo_63" class="demo_63-1"></div>
 <div id="demo_63" class="demo_63-2"></div>

.demo_63-1{
   background-size:contain!important;
   background-attachment:fixed;
 }
 .demo_63-2{
   background-size:cover!important;
   background-attachment:scroll;
 }
 #demo_63{
   height: 200px;
   background-color: #dadada;
   background-image: url("http://wunderstand.net/wp-content/uploads/2019/06/01.jpg");
   background-repeat: no-repeat;
   margin-bottom:10px;
 }

おわかりいただけたでしょうか。

scrollの方は普段と変わりありません。fixedを指定した方は、背景の位置が固定されているため、画面をスクロールしていくと、背景画像の見える領域が変わっていくのがわかります。

ラムネ

ちょっと不思議な動きですね。少し賑やかになる効果があるので、シンプルなサイトのアクセントとして使われることもあります。

応用編！backgroundのショートハンド

背景を設定するためのプロパティがいくつも出てきましたが、backgroundプロパティのショートハンドを使うことで1行でまとめて書くことが出来ます。

背景のショートハンドは以下のように書きます。

background: -colorの指定 -imageの指定 -repeatの指定 -positionの指定 -attachmentの指定 -clipの指定 -sizeの指定 -originの指定;

このようにいままで解説してきたプロパティをすべて1行で指定することが出来ます。

くま

ややこしい！！

ラムネ

最初は僕もそう思ったけど、何回も使うとこっちの方が早くて便利だってことに気づいたよ。でもまあ無理して覚える必要は全くないので余裕があればくらいに考えておくといいよ。

以下のポイントを抑えて使用しましょう。

• どの順序で指定してもよい
• 必要ない指定は省略可能(※ただし省略した場合は初期値を設定したことになる)
• background-sizeプロパティはbackground-positionプロパティの後に「/」で区切って指定する

実際に普通に書くのとどれくらいの違いになるか比べてみましょう。

まずは普通に一つずつプロパティを書いた場合。

<div id="demo_64"></div>

#demo_64{
   height: 200px;
   background-color: #dadada;
   background-image: url("http://wunderstand.net/wp-content/uploads/2019/06/01.jpg");
   background-repeat: no-repeat;
   background-size: contain;
   background-position:top left;
   background-attachment:scroll;
 }

次に全く同じ内容をショートハンドで記述した場合。

<div id="demo_64-2"></div>

#demo_64-2{
   height: 200px;
   background:#dadada url("http://wunderstand.net/wp-content/uploads/2019/06/01.jpg") no-repeat top left / contain scroll
 }

結局は同じどちらで書いても同じ結果になりますが、ショートハンドをうまく使えば、長くなりがちなCSSの記述をスッキリと書くことができます。

マスターすれば時間の節約にもなるので、是非チャレンジしてみてください。

まとめ

• 背景色を変えるにはbackground-colorプロパティを使う
• 背景に画像を表示するにはbackground-imageプロパティを使う
• 背景画像の繰り返しの方法を設定するには、background-repeatプロパティを使う
• 背景画像のサイズを調整するには、background-sizeプロパティを使う
• 背景画像の位置を調整するにはbackground-positionプロパティを使う
• background-attachmentプロパティを使うことで、背景をスクロールさせるか、固定させるか指定することが出来る
• backgroundのショートハンドプロパティを使うことで1行でまとめて書くことが出来る

関連記事

CSSで文字色を変更する方法！colorの使い方をサンプルで解説

【css】marginとpaddingの使い方や違いを解説