
コンテンツの背景に色をつけたり画像を設定したりすることができるのがCSSのbackgroundプロパティです。
このプロパティにはさまざまな指定をすることができるのですが、どのように設定したら思った通りの位置に背景を表示させることができるのか、こんな指定方法を知っていたらよかったのにと思うことがしばしばあったのでメモしていきます。
まとめて指定する(ショートハンド)記述方法
backgroundプロパティは、複数の値を一括して指定することができます。
background: #000 url("画像URL") no-repeat left top/contain fixed content-box text;
background: color image repeat position/size attachment origin clip
全て記述する必要はなく、各値はスペースで区切ります。順不同に書いても問題ない値がほとんどですが、2点ほど書く順番によってうまく適用されないものがあるので覚えておきましょう。
サイズ(size)は位置(position)の値にスラッシュをつけて設定します。【位置 / サイズ 】
基点(background-origin)とクリッピング(background-clip)は書く順番によって決められます。
最初に書かれたものがbackground-origin、後に書かれたものがbackground-clipとして適用され、一つだけの場合両方に同じ内容が適用されます。
各値は別のプロパティを使って一つずつ指定することもできます。
backgroundプロパティの種類
background: 値;
という形で一括で設定することもできますが、それぞれ1つずつ指定することもできます。
background-color | 背景の色 |
background-image | 背景画像 |
background-repeat | 背景の繰り返し |
background-position | 背景の位置 |
background-size | 背景のサイズ |
background-attachment | 背景の固定 |
background-origin | 配置する時の基準点 |
background-clip | 背景と重なる要素のクリッピング |
background-color
background-color
は背景色を設定するときに使用します。色の指定は green や blue といった色名やhex、rgb(a)、hsl(a)値などで指定できます。
background-color: green;
background-color: #438443;
background-color: rgba(67,122,67,.64);
background-image
background-image
は背景に画像を設定するときに使用します。
url('画像のパス')
で背景に使用する画像を指定します。絶対パスでも相対パスでも指定できます。
background-image: url('画像のパス');
background-image: url('//example.com/image/img.png');
background-image: url('../image/img.png');
値をカンマで区切ることで複数の画像を指定することもできます。
background-image: url('画像のパス1'),
url('画像のパス2');
複数指定した場合、後に記述されるものほど後ろに追加されていきます。上記の指定であれば、「画像のパス1」が手前に、「画像のパス2」が後ろに配置されます。
サイズの調整は background-size
、縦横の配置は background-position
で調整していきます。これらのプロパティも複数の指定が可能です。
画像とカラーを同時に指定する場合は backgroundプロパティを使用します。
background: blue url('画像のパス1');
この場合は指定した順序に関係なく、画像が上に、カラーが下になります。
background-repeat
background-repeat
は背景画像をリピートさせるかどうか、どの方向にリピートさせるかといったことを指定できます。
repeat(初期値) | 縦横それぞれにリピート。 |
no-repeat | リピートしない。 |
repeat-x | 横方向にのみリピート。 |
repeat-y | 縦方向にのみリピート。 |
space | 画像の比率は元画像のまま、要素の4辺に接する形で均等にリピートして配置。 |
round | 要素内に隙間なく並ぶサイズに調整してリピート配置。 元画像と比率が変わることがある。 |
リピートせず一枚の画像として表示させたい場合は no-repeat
を指定。
background-repeat: no-repeat;
縦方向だけ、横方向だけにリピートさせるようにする場合は repeat-x
、 repeat-y
を指定します。
background-repeat: repeat-x; /* 横方向にのみリピート */
background-repeat: repeat-y; /* 縦方向にのみリピート */
リピートすると要素の大きさによって見切れてしまう部分が出てくることがあります。画像が見切れないようにするには「space」や「round」といった値を使用します。
「space」は画像の縦横比はそのままに要素内にぴったり収まるサイズに自動調整してリピートします。画像サイズによって余白ができます。
「round」は要素内を埋め尽くすように画像がリピートされます。余白なく埋め尽くすため要素の大きさによって画像の縦横比が変わります。
background-position
background-position
は背景をどこに配置するかを指定します。デフォルトは左上なので、この位置を変更したい場合に使用します。
top, bottom, left, right といった場所指定の他、数値で細かく指定することもできます。

/* 右上 */
background-position: top right;
/* 上から50px、右から100pxのところ */
background-position: top 50px right 100px;
/* 右から90%のところ */
background-position: top right 90%;
/* 上・左から50% */
background-position: 50%;
/* 左から20%、上から40% */
background-position: 20% 40%;
background-size
background-size
は背景のサイズを指定するプロパティです。pxや%などを使用して数値を指定する他、以下の指定方法もあります。
auto(初期値) | 自動的にサイズを算出。 指定のない場合は画像の元サイズで表示。 |
cover | 縦横の大きい方のサイズに合わせて要素全体を覆う。 要素からはみ出た部分は表示されない。 |
contain | 要素いっぱいに画像全体を表示させる。 要素と縦横比が異なる場合空白ができる。 |
どの指定も画像の縦横比はそのままです。
contain は画像の全体を表示させたい場合に使用します。
cover は要素を埋め尽くしたい場合に使用します。
画像全体を表示させつつ要素も埋め尽くしたい、という場合は画像のサイズや背景を設定する要素の調整が必要になります。
background-attachment
background-attachment
では背景をどのように固定するかを指定できます。
scroll(初期値) | 要素自身に対する相対位置で固定。要素の内容と共にスクロールはされない。 |
local | 要素の内容に対する相対位置で固定。要素の内容と共にスクロールされる。 |
fixed | ビューポートに対する相対位置で固定。要素と共に動かないで固定。 |
scroll と local はどちらも画面をスクロールした際に画像も動くのですが、背景を設定している要素がスクロールできる場合に違いが出てきます。
background-attachment – CSS: カスケーディングスタイルシート | MDN
background-origin
background-origin
は配置する基準点(どこから背景を配置させるか)を指定するプロパティです。
border-box | borderを含めたところが基点 |
padding-box | 要素のpaddingの範囲を含めたところが基点 |
content-box | 要素のコンテンツエリアが基点 |
パディングがある要素に background-origin: content-box;
と background-size: cover;
を指定をしている場合、背景がはみ出ているように見えてしまいます。
.background_propaty .bg_origin_content {
border: 10px solid;
background-image: url('./images/sample_img.jpg');
background-origin: content-box;
background-repeat: no-repeat;
background-size: cover;
padding: 1rem;
}
この場合 background-size: 100%;
を指定することでコンテンツ内に収まります。
background-clip
background-clip
は背景の描画範囲を指定します。指定した範囲で背景がマスクされる状態になります。
テキストをマスクして背景を見せるような方法もあります。
border-box | 要素のborderを含めて背景を配置 |
padding-box | 要素のpaddingの範囲を含めて背景を配置 |
content-box | 要素のコンテンツエリア内に背景を設置 |
text | テキストの範囲内に背景を設置 |
背景をグラデーションにする
カテゴリー : HTML-CSS