1. TOP
  2. html&CSS入門
  3. CSSで背景をカスタマイズ!色の変更や画像の設定をマスターしよう!

CSSで背景をカスタマイズ!色の変更や画像の設定をマスターしよう!

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

CSSで背景色を変える方法

背景色を変えるにはbackground-colorプロパティを使います。

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

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

初期値にはtransparentが指定されています。transparentを指定された背景は透明になるため、親要素の背景が透けるようになります。全ての親要素に背景色がない場合、白になります。

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

<div id="demo_48">
   <p>ワンダフルな</p>
   <p>アンダスタンド</p>
 </div>
#demo_48{
   background-color: red;
 }

ワンダフルな

アンダスタンド

divに背景色を設定しているため、背景が赤くなるのが確認できます。もし文字の部分の背景色を変えたければ、pにスタイルを設定しましょう。

<div id="demo_49-1">
   <p id="demo_49-2">ワンダフルな</p>
   <p>アンダスタンド</p>
 </div>
#demo_49-1{
   background-color: red;
   padding: 5px;
 }
 #demo_49-2{
   background-color: blue;
   color:#fff;
 }

ワンダフルな

アンダスタンド

文字の背景色が青になりましたね。文字に背景色を設定する場合は、読みづらくならないように、文字色にも気をつけましょう。

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("https://wunderstand.net/wp-content/uploads/2019/06/01.jpg");
 }

この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。この文章はダミーです。文字の大きさ、

背景に画像が表示されましたね。

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

背景画像のオプション

背景画像はいろんなオプションを設定することができます。ここでは代表的な4つを覚えましょう。

背景画像のオプション

  • background-repeat
    背景画像の繰り返し
  • background-size
    背景画像のサイズ
  • background-position
    背景画像の開始位置
  • background-attachment
    背景画像の固定・移動

※他にも、背景を配置するエリアを設定するbackground-originや、背景の描画領域を設定する background-clipなどのプロパティもありますが、あまり使うことがないので、ここでは説明を省きます。

背景画像の繰り返し設定

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

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

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

repeatの値

  • repeat
    全方向にリピートして表示します。初期値はこの状態。
  • repeat-x
    X方向、つまり横方向にだけリピートします。
  • repeat-y
    Y方向、つまり縦方向にだけリピートします。
  • no-repeat
    リピートはしません。

デフォルトではrepeatになっているので、縦横にリピートされます。リピートさせたくない場合は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: #ffe6e6;
   margin-bottom: 10px;
   background-size: 50px;
 background-image: url("https://wunderstand.net/wp-content/uploads/2019/06/01.jpg");
 }

repeatの場合

repeat-xの場合

repeat-yの場合

no-repeatの場合

それぞれのパターンを設定した要素を用意しました。このように、background-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("https://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("https://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("https://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("https://wunderstand.net/wp-content/uploads/2019/06/01.jpg");
   background-size: 50px 50px;
 }

2つ指定すると画像の縦横比が変わる可能性があるので注意が必要です。

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

<div id="demo_56"></div>
 #demo_56{
   height: 200px;
   background-color: #ffe6e6;
   background-image: url("https://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("https://wunderstand.net/wp-content/uploads/2019/06/01.jpg");
  background-size: auto 50px;
 }

数値(%)の例

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

基本的には数値(px・em)で指定した場合と同じです。

違うのは、要素にたいしての割合になる点です。1つ目の値は要素の横幅に対しての割合、2つ目の値は要素の高さに対しての割合となります。

背景画像の位置を調整

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

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

1つ目の値で横の位置を、2つ目の値で縦の位置を指定します。キーワードで位置を指定するか、数値で直接指定します。1つだけ指定した場合はもう一方はcenterとみなされます。

背景画像の位置

  • 横方向の指定
    left / center /right
  • 縦方向の指定
    top/ center / bottom
  • 数値(px)
    要素の左上からの位置をpxで指定
  • 数値(%)
    要素の左上からの位置を%で指定

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

キーワードで指定

<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: #ffe6e6;
   background-image: url("https://wunderstand.net/wp-content/uploads/2019/06/01.jpg");
   background-size: 150px auto;
   background-repeat: no-repeat;
   margin-bottom:10px;
 }

left bottomの場合

centerの場合

rightの場合

1つめはleftとbottomを指定しているので、左・下から背景が適用されています。

2つめはcenterを1つだけ指定しています。省略されたほうはcenterになるので、縦横ともに中央から表示されています。

3つめはrightを1つだけ設定しています。省略されたほうはcenterになるので、背景が右・中から表示されています。

数値(px)で指定

<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: #ffe6e6;
   background-image: url("https://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: #ffe6e6;
   background-image: url("https://wunderstand.net/wp-content/uploads/2019/06/01.jpg");
   background-size: 150px auto;
   background-repeat: no-repeat;
   margin-bottom:10px;
 }

上記の例の場合、横は左上から50pxの位置、上下は底辺に表示されています。

数値(%)で指定1

 <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: #ffe6e6;
   background-image: url("https://wunderstand.net/wp-content/uploads/2019/06/01.jpg");
   background-size: 150px auto;
   background-repeat: no-repeat;
   margin-bottom:10px;
 }

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

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

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: #ffe6e6;
   background-image: url("https://wunderstand.net/wp-content/uploads/2019/06/01.jpg");
   background-repeat: no-repeat;
   margin-bottom:10px;
 }

fixedにされた方は、背景が固定されているため、画面をスクロールしていくと表示される場所が変わっていきますね。

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

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

このように一つにまとめて書くことをショートハンドとよんでいます。背景のショートハンドは以下のように書きます。

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

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

特徴としては以下のようなものがあるので使う際は注意しましょう。

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

実際にやってみましょう。

<div id="demo_64"></div>
#demo_64{
   height: 200px;
   background-color: #ffe6e6;
   background-image: url("https://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:#ffe6e6 url("https://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行でまとめて書くことが出来る