CSSで背景を指定するbackgroundプロパティの使い方

コンテンツの背景に色をつけたり画像を設定したりすることができるのが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-xrepeat-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-boxborderを含めたところが基点
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

TOPへ