概要

要素の背景は、
背景の色、画像、原点と寸法、反復方法などです。

要素の高さは、コンテンツの上端と下端との距離を言います。
height プロパティで指定しますが、その指定する内容も、box-sizing プロパティによりコンテンツ領域の高さか境界領域の高さかを指定する事ができます。

尚、ブロックレベル要素での要素に含まれる行ボックスの最小の高さや、非置換インライン要素での行ボックスの高さの計算に使われる高さは line-height プロパティで指定します。

  • 1.background : 要素の背景を指定する一括指定プロパティ
    • 2.background-color : 要素の背景の色を指定する個別指定プロパティ
    • 3.background-image : 要素の背景画像を指定する個別指定プロパティ
    • 4.background-position : 要素の背景画像の初期位置を指定する個別指定プロパティ
    • 5.background-size : 要素の背景画像の寸法を指定する個別指定プロパティ
    • 6.background-repeat : 要素の背景画像の反復方法を指定する個別指定プロパティ
    • 7.background-attachment : 要素の背景画像の位置をビューポートの中に固定するか、包含ブロックと一緒にスクロールするかを設定する個別指定プロパティ
    • 8.background-origin : 要素の背景配置領域を設定する個別指定プロパティ
    • 9.background-clip : 要素の背景画像の要素の背景の <color> または <image> を境界の下まで拡張するかどうかを設定する個別指定プロパティ

インライン要素への 背景の指定

  1. cdvSample021 > * { outline: solid 1px currentColor; }
  2. cdvSample021 > *:nth-of-type(2) { background: url(./sample32.png) no-repeat #ffccff; }
  1. <div class="cdvSample021">
  2. <div>ブロック<br>要素</div>
  3. <span>インライン要素</span
  4. ><span>インライン要素</span
  5. ><span>インライン要素</span>
  6. <div>ブロック<br>要素</div>

インライン要素の閉じタグを複数行に渡らせることで、タグ内に改行コードを押し込む対応をしています。
テキスト，インライン要素後の改行コードは１つのスペース相当と扱われてしまう為です。

ブロック
要素
インライン要素インライン要素インライン要素
ブロック
要素

要素の背景の適用方法

  1. cdvSample010 > div { outline: solid 1px; padding: 1em; border: solid 1em transparent; overflow: hidden scroll; height: 6em; }
  1. <div class="cdvSample031">
  2. <div style="">壱<br>弐<br>参<br><br><br><br><br></div></div>

例示の雛型です。style属性を書き換えて例示しています。

壱
弐
参




  1. background-color: #ffccff;
  2. background-image: url(./sample16.png),url(./sample32.png);
  3. background-repeat: no-repeat;
  4. background-position: top left,top right;
  5. background-clip: padding-box,content-box,border-box;

background-color と background-clip の値を指定しました。背景色は、一番下の背景画像レイヤーに関連付けられているbackground-clip値に従ってクリッピングされます。
例示では、background-clip の値は３つありますが、background-image の値は２つだけですので背景画像レイヤーに関連付けられているのは２つまでです。

壱
弐
参




  1. background-color: #ffccff;
  2. background-image: url(./sample32.png);
  3. background-repeat: repeat;
  4. background-position: top right;
  5. background-attachment: fixed;
  6. background-origin: content-box;
  7. background-clip: padding-box;

background-attachment プロパティに fixed の値を指定しました。fixed は、背景はビューポートに関して固定されています。

壱
弐
参




  1. background-color: #ffccff;
  2. background-image: url(./sample32.png);
  3. background-repeat: repeat;
  4. background-position: top right;
  5. background-attachment: local;
  6. background-origin: content-box;
  7. background-clip: border-box;

background-attachment プロパティに local の値を指定しました。local は、背景は要素のコンテンツに関して固定されています。スクロール可能な領域にはボーダー領域が含まれていないため、スクロール可能な要素の場合、background-clipのborder-box値はpadding-boxと同じように扱われます。

壱
弐
参




  1. background-color: #ffccff;
  2. background-image: url(./sample32.png);
  3. background-repeat: repeat;
  4. background-position: top right;
  5. background-attachment: scroll;
  6. background-origin: content-box;
  7. background-clip: border-box;
  8. border: dashed 1em;
  9. border-radius: 2em;

境界線 を指定しました。背景は境界線の後ろに描画されます。

壱
弐
参




計算値 (継承)

  1. cdvSample041 > div { background-image: url(./sample16.png),url(./sample32.png); background-repeat: no-repeat; background-position: top left,top right; outline: solid 1px currentColor; padding: 1em; }
  2. cdvSample041 > div > div { background-image: url(./sample16.png),url(./sample32.png); background-repeat: no-repeat; background-position: inherit; outline: solid 1px currentColor; height: 6em; }
  1. <div class="cdvSample041">
  2. <div style=""><div></div></div></div>

例示の雛型です。子要素のstyle属性を書き換えて例示しています。
background-position: inherit; を子要素に指定する事により、継承による計算値の確認を意図しています。

  1. background-image: url(./sample16.png);

親要素の background-image プロパティの値を１つに上書きしました。background-image プロパティの数でレイヤーの数が決まるので、親要素のレイヤー１つとなります。

一括指定プロパティと初期値

  1. height: 6em; background: url(./sample32.png);
  1. height: 6em; background: url(./sample32.png); background: #ffccff;

background: #ffccff の記述により、background: none 0% 0% /auto repeat scroll padding-box border-box #ffccff; が記述されたのと同等の処理が行われます。

おまけ