背景を指定する！background-imageの使い方、一括、複数での書き方

背景の画像(gradient)を指定します｡

imgタグとの違いはこちらの記事で解説しています｡

background-imageの使い方、imgタグの使い方【画像の使い分け】

HTMLコーディングのときにに画像の表示方法に悩んでいますか？この記事ではどのようにbackground-imageとimgタグを使い分ければいいか、実際にどんなところに使えばいいかを解説しています。ぜひご覧ください。

背景の色を指定します｡
background-imageの指定がなくても機能します｡
背景画像が透過を含んでいれば画像の背景色として表示されます｡

background-imageの繰り返す方法を指定します｡
初期値は繰り返します｡(repeat)

background-imageのサイズを指定します｡
初期値は画像そのままのサイズ(auto)で表示されます｡
background-repeatで繰り返すとき以外は､レスポンシブにも対応できるように「contain」､「cover」を使うことが多いです｡

background-imageの位置を指定します｡
初期値は左上(0 0)です｡

background-imageのスクロール時の表示方法を指定します｡
初期値はブラウザのスクロールに合わせてスクロールしていきます｡(scroll)
fixedを指定することでそのままの位置で固定表示され､簡易的なパララックスのような表示をすることができます｡

ただし､iPhoneでfixedが効かないので､iPhoneでの挙動を無視できる場合をのぞいて使用できない状況です｡

background-imageの基準位置を指定します｡
初期値はpaddingを含む位置が基準になります｡(padding-box)

あまり使うことがないです｡

background-imageの描画領域を指定します｡
初期値はborder､paddingを含むエリアが背景に含まれます｡(border-box)

あまり使うことがないです｡

あまり使うことがないです｡

現状､Firefoxでしか使えないようです｡

background(一括指定)では使えません｡

背景が重なるときの描画モードを指定します｡
初期値は合成しません｡(normal)

乗算とかオーバーレイとかが使えるのでかなり便利なのですが､IEでは使えないので､IEを無視できる案件でない限り､使うことができません｡

background(一括指定)では使えません｡

「background」で一括指定するには､個別の指定を半角スペースで区切って指定します｡
「background-size」だけは前に「/」が必要です｡

ショートハンドの書き方(初期値なので実際に書く必要はないです｡)

background: none transparent repeat 0 0 / auto scroll padding-box border-box;

上のショートハンドを個別に指定すると

background-image: none;
background-color: transparent;
background-repeat: repeat;
background-size: auto;
background-position: 0 0;
background-attachment: scroll;
background-origin: padding-box;
background-clip: border-box;

背景画像は､カンマ(,)区切りで複数かさねることができます｡

background:
  url(./img/bg1.png) left top / 100px 100px ,
  url(./img/bg2.png) right bottom / 100px 100px;

background-image: url(./img/bg1.png), url(./img/bg2.png);
background-position: left top, right bottom;
background-size: 100px 100px, 100px 100px;

ショートハンドでも個別指定でもできますが､レスポンシブで部分的に上書きするときには全部を書く必要があります｡

疑似要素についてはこちらの記事で解説しています｡

【CSS】疑似要素（:before、:after）とは？よくあるミス、使い方

コーディングで使う疑似要素について知りたいですか？この記事では疑似要素についての解説、よくあるミスについて、おもな使い方（アイコン、図形、装飾、連番）について紹介しています。ぜひご覧ください。

ストライプをつくるには､linear-gradientとrepeating-linear-gradientの2つの方法があります｡
どちらもほぼ同じです｡

縦横のストライプを2つ重ねるとチェック柄になります｡
色はRGBではなくCMYKで指定すると透過する色になるので重なる部分の色が濃くなります｡

See the Pen チェック柄 by hashi84 (@hashi84) on CodePen.

ドットをつくるには､radial-gradientとrepeating-radial-gradientの2つの方法があります｡
どちらもほぼ同じです｡

CSSファイルの読み込めているでしょうか？
ファイル名の入力ミス､相対パスなら「./」「../」の間違いはないか再確認してみてください｡

CSSファイル内で画像ファイルが読み込めているでしょうか？
ファイル名の入力ミス､相対パスなら「./」「../」の間違いはないか再確認してみてください｡

要素にテキストや画像(img)などがないタグは高さがありません｡
高さがないものには表示する場所がないので背景(background)の指定が間違っていなくても表示されないということになってしまいます｡

heightやmin-heightで高さを指定する必要があります｡