background-colorプロパティやbackground-sizeプロパティなど、背景に関するプロパティは数多くありますが、backgroundプロパティで、それらの指定をまとめて行うことができます。
今回は、backgroundプロパティについてまとめたいと思います。
背景に関するプロパティについては、以下のページもご参照下さい。
CSS【 background 】1~背景プロパティの種類とbackground-color
CSS【 background 】2~background-imageでレイヤーやグラデーションも
CSS【 background 】3~background-repeat、background-attachment
CSS【 background 】4~background-position
CSS【 background 】5~background-size
CSS【 background 】6~background-clip、background-origin
CSS【 background 】7~背景に関するショートハンドプロパティ(本ページ)
なお、未経験からITエンジニアへの就職に興味がある方や未経験からプログラミングを効率よく学びたいと考えている方は、就職率98.3%で受講料無料のプログラミングスクールプログラマカレッジもおすすめです。
backgroundプロパティは、背景に関する各プロパティの指定をまとめて行うことができるショートハンドプロパティです。
backgroundプロパティで指定できるプロパティは、次の通りです。
background-color | 背景の色を指定するプロパティ 値:CSSの色指定(カラーネーム、RGB、HSL)、transparent(透明)、currentColor(文字色) デフォルト値:transparent(透明) |
---|---|
background-image | 背景画像を指定するプロパティ 値:url(“画像のURL”) デフォルト値:none(背景画像なし) |
background-repeat | 画像の繰り返し方法を指定するプロパティ 値:repeat-x、repeat-y、repeat、no-repeat、space、round デフォルト値:repeat |
background-attachment | スクロール時の背景画像の挙動を指定するプロパティ 値:fixed、scroll、local デフォルト値:scroll |
background-position | 画像表示位置を指定するプロパティ 値:数値(pxやemなどの単位を付ける)、%、top、right、bottom、left、center デフォルト値:0 0 |
background-size | 画像表示サイズを指定するプロパティ 値:数値(pxやemなどの単位を付ける)、%、auto、contain、cover デフォルト値:auto |
background-clip | 背景の範囲を指定するプロパティ 値:border-box、padding-box、content-box デフォルト値:border-box |
background-origin | 画像配置の基準位置を指定するプロパティ 値:border-box、padding-box、content-box デフォルト値:padding-box |
background | ショートハンドプロパティ 指定したい値を半角スペースで区切って指定する sizeはpositionとセットでposition/sizeという順番でスラッシュで区切って指定する originはclipの前に指定する 上記以外の指定は順不同 |
backgroundプロパティは、ほとんどの内容については、指定したい値を、順番を気にせずに、半角スペースで区切って指定すればOKですが、次の2点だけ、特別なルールがあります。
• sizeを指定する場合は、必ずpositionとセットで、「position/size」という形で指定します。
(positionは、単独で指定できます。)
• originとclipを両方指定する場合は、「origin clip」の順番に指定します。
(どちらか1つのみ指定する場合は、両方が同じ値となります。)
sizeとpositionは、他のプロパティと違って複数の値を半角スペース区切りで指定できるため、このルールがないと、何の値かをブラウザが認識できなくなるので、上記のルール(position/size)が存在します。
originとclipは、値がどちらも3つのキーワード(border-box、padding-box、content-box)のみのため、このルールがないと、どのプロパティに対する値かをブラウザが認識できなくなるので、上記のルール(origin clip の順に指定)が存在します。
各プロパティで指定した背景は、レイヤー構造となります。
画像やグラデーションを複数指定する場合は、上から順に画像が重なり、background-colorプロパティで指定した背景色は一番下のレイヤーとなります。
backgroundプロパティで画像等を複数指定する場合は、レイヤーごとにカンマ(,)で区切って指定し、最後のレイヤーだけbackground-colorを指定します。
次の3つの画像を、上から順に、上(img1.jpg)、中(img2.jpg)、下(img3.jpg)の順に重ねてみます。
ソースは次の通りです。
<!-- CSSファイル -->
div#sample {
margin:0;
padding:2em;
color:#FFF;
font-weight:bold;
height:15em;
border-top: solid 25px rgba(255,255,255,.5);
background:
url(img/img1.jpg) no-repeat right 5px top 5px/auto padding-box border-box,
url(img/img2.jpg) repeat-x -20px 5px/40px 40px border-box,
url(img/img3.jpg) 0 0/15px border-box #FFD9D9;}
<!-- HTMLファイル -->
<div id="sample">
上:ヨット(img1.jpg)
中:カモメ(img2.jpg)
下:模様(img3.jpg)
</div>
INTERNOUS,inc. All rights reserved.