背景指定に関するbackgroundプロパティまとめ

backgroundプロパティについて

backgroundで省略化するときに、まとめて指定できる属性が以下です。

使用例

background-color

背景色を指定できます。

background-color: #eee;

background-image

背景に画像を指定できます。

background-image: url(background.png);

background-repeat

背景画像の繰り返し方法を指定できます。背景画像を指定している場合に使います。
デフォルトはrepeatです。
単に繰り返すといっても、横方向や縦方向にのみ繰り返させることもできます。

background-repeat: no-repeat; //繰り返さない
background-repeat: repeat; //繰り返す
background-repeat: repeat-x; //横方向に繰り返す
background-repeat: repeat-y; //縦方向に繰り返す

background-position

背景画像の位置を指定できます。
デフォルトはtop leftまたは0 0です。

指定方法は、下記です。

//縦の位置、横の位置の片方がデフォルト設定のまま、どちらか片方を指定する場合
background-position: top; //上に配置
background-position: bottom; //下に配置
background-position: left; //左に配置
background-position: right; //右に配置

//縦の位置、横の位置どちらも指定する場合（例）
background-position: top center; //上、中央に配置
background-position: bottom right; //下、右に配置

これ以外にもpxや%でも位置の指定ができます。
%で指定する場合、50%で中央に配置されます。
指定する順番は最初に上から、次に左からです。

background-position: 上からの距離 左からの距離;
background-position: 50px 100px; //上から50px、左から100pxに配置
background-position: 10% 50%; //上から10%、左から50%（中央）に配置

background-attachment

背景画像のスクロール方法を指定できます。
デフォルトはscrollです。

background-attachment: scroll; //ページをスクロールするのと一緒に背景画像もスクロールする
background-attachment: fixed; //ページをスクロールしても、背景画像は固定表示

backgroundの省略

たとえば背景色をつけるだけ、など指定したい属性が1つの場合は
background-color:　のみの指定で良いですが
下のcssのように画像も、色も、配置する場所もリピートも…とたくさんの指定をしたい場合は
いちいち書くのも大変ですよね。

.background {
	background-color: #eee;
	background-image: url(background.png);
	background-repeat: no-repeat;
	background-position: right top;
	background-attachment: fixed;
}

backgroundプロパティは、背景をまとめて指定することができます。

使用例

background

backgroundは背景の指定を省略ができます。
背景を指定する際はいちいちひとつひとつ指定はせず、もうこれしか使わないです。

background: #eee url(background.png) no-repeat fixed bottom right;

こんなかんじで、一気に指定できちゃいます。
らくちんですね！

複数画像の指定をbackgroundで省略

上記でまとめたものはひとつのbackground.pngという画像が表示されますが
複数画像を表示させたい場合はどうでしょう？

background: url(background.png) no-repeat fixed bottom right,url(background02.png) repeat-y right top #eee;

こんなかんじで、”,”で分けて記述すれば複数の画像も指定できます。

background-size

画像のサイズを指定したい場合についてもご紹介します。
background-sizeは、背景の画像の表示サイズを指定することができます。
何も指定しないと、元の画像サイズで表示されます。

スマホで表示する場合はそのままのサイズだと画像がぼやけてしまうので
画面サイズの2倍のサイズの画像を使用します。
その場合、元のサイズのままだと画像が大きすぎる…どうしよう！なんてことや、

画面いっぱいに背景画像を表示させたい！でもそのままのサイズだと
大きすぎたり幅や高さが足りない…どうしよう！なんとこともあります。

ここで活躍してくれるのがbackground-sizeです！
background-imageまたはbackgroundプロパティと一緒に指定します。

coverはフルスクリーン表示の場合によく使われています。
ウィンドウサイズを変えてみても、縦横比固定のまま表示領域を埋め尽くすように表示されます。
縦横比固定のままなのではみ出る部分が出てきますがはみ出た部分は非表示になります。

containも縦横比固定ですが、
表示領域に背景画像がぜんぶ表示されるため、ウィンドウサイズに対して
縦や横が足りない場合は余白ができるような形で表示されます。

background-size: cover; //表示領域いっぱいに背景画像を表示
background-size: contain; //表示領域に対して背景画像全体を表示

さらに、pxや%での指定もできます。

background-size: 画像の幅 画像の高さ;
background-size: 100% auto; //横100%表示、縦は自動（この場合縦横比は崩れません）
background-size: 400px 300px; //横400px、縦300pxで表示

背景に画像とグラデーションの両方を指定する

冒頭で書きましたが
ひとつの要素にbackground:linear-gradientとbackground-imageを同時に
指定するとどちらかが消えてしまう…でも同時に指定したい！
こんなときどうしたらいいんだろう？ということで調べました。

たとえば、

.btn {
	background: linear-gradient(to bottom, #ffffff 0%,#eee 100%);
	background-image: url(../img/arrow.png);
}

こう書いてみたところ…
background-imageの指定が優先されてグラデーションが消えてしまいました。。

ならば逆だ！と逆にしてみると

.btn {
	background-image: url(../img/arrow.png);
	background: linear-gradient(to bottom, #ffffff 0%,#eee 100%);
}

今度はlinear-gradientの指定が優先されて、画像が消えてしまいました。
ただ、グラデーションではなく、色の指定だとなぜか効く…なんで？

.btn {
	background: #eee;
	background-image: url(../img/arrow.png);
	background: url(../img/arrow.png) no-repeat 100% 50%,linear-gradient(to bottom, #ffffff 0%,#eee 100%);
}

なんと、グラデーションはbackground-imageの一種だそうです。
そりゃあこの指定の仕方じゃ効かないわけですよね。。
backgroundプロパティは、上記で説明したとおり複数の画像の指定もできるので、
複数指定をしたら表示されました！！

.btn {
	background: url(../img/arrow.png) no-repeat 96% 50%,linear-gradient(to bottom, #ffffff 0%,#eee 100%);
}

最後に

まとめてみると背景指定もたくさん方法がありますね。
ほかにもあったんですが長くなってしまうのでまたの機会に書こうと思います…！
今回の発見はグラデーションが画像の一種だということでした！