background-size CSS プロパティとは
トピック：背景画像のサイズを指定する事ができる 画像は自然な大きさを保持し、自然な大きさになり、新しい大きさに引き伸ばされたり、使用可能な空間に収まるように拡大縮小する
プロパティ background-size
実例 コード 1
サンプル コードを試す #webref1 {
background: url("../webref.jpg");
background-repeat: no-repeat;
background-size: auto;
}
#webref2 {
background: url("../webref.jpg");
background-repeat:no-repeat;
background-size: 300px 100px;
}
プロパティ 定義と使用法
| デフォルト値・初期値 : | auto auto |
|---|
| 適用対象 : | 全要素。 ::first-letter and ::first-line にも適用されます。 |
|---|
| 継承 : | 不可 |
|---|
| パーセンテージ : | relative to the background positioning area |
|---|
| メディア : | visual |
|---|
CSS Version | CSS3 |
|---|
| 計算値 : | 指定通り。ただし相対的 length は絶対的 length に変換 |
|---|
| JavaScript 構文 | object.style.backgroundSize="60px 120px" |
|---|
| アニメーションの種類 : | 長さ、パーセンテージ、または計算の単純なリストの反復可能なリスト |
|---|
| 正規順序 : | 形式文法で定義される一意のあいまいでない順序 |
|---|
| CSSの構文 | background-size: auto |length |cover |contain |initial |inherit; |
|---|
プロパティ値
| 値 | 説明 |
|---|
auto | デフォルト値。背景画像は元のサイズで表示 |
length | 背景画像の幅と高さを設定する 最初の値は幅を設定し、2番目の値は高さを設定する 1つの値しか与えられない場合、2番目の値は "auto"に設定される length units |
percentage | 背景画像の幅と高さを親要素のパーセントで設定する 最初の値は幅を設定し、2番目の値は高さを設定1つの値しか与えられない場合、2番目の値は "auto"に設定される |
cover | 画像全体を覆うように背景画像のサイズを変更する 画像を引き伸ばすか、端から少し外しても |
contain | 背景画像のサイズを変更して、画像が完全に見えるようにする |
initial | このプロパティをデフォルト値に設定する |
inherit | 親要素からこのプロパティを継承する |
サポートするデスクトップ ブラウザ対応・互換性
| Property | Desktop 互換性 |
|---|
| background-size | Chrome | Edge | Firefox | Internet Explorer | Opera | Safari |
|---|
| 基本 サポート | フルサポート◯1 | フルサポート◯12 | フルサポート◯4 | フルサポート◯9 | フルサポート◯9.5 | フルサポート◯3 |
|---|
contain and cover | フルサポート◯3 | フルサポート◯12 | フルサポート◯3.6 | フルサポート◯9 | フルサポート◯10 | フルサポート◯4.1 |
|---|
| SVG image as background | フルサポート◯44 | フルサポート◯12 | フルサポート◯8 | フルサポート◯9 | フルサポート◯31 | 不明 |
|---|
サポートするモバイル ブラウザ対応・互換性
| Property | Mobile 互換性 |
|---|
| background-size | Android | Chrome for Android
| Edge Mobile | Firefox for Android
| Opera for Android
| iOS Safari | Samsung Internet |
|---|
| 基本 サポート | フルサポート◯2.3 | フルサポート◯あり | フルサポート◯あり | フルサポート◯4 | フルサポート◯あり | フルサポート◯あり | フルサポート◯あり |
|---|
contain and cover | 不明 | 不明 | フルサポート◯あり | フルサポート◯あり | 不明 | フルサポート◯あり | 不明 |
|---|
| SVG image as background | 不明 | 不明 | フルサポート◯あり | フルサポート◯8 | フルサポート◯あり | 不明 | 不明 |
|---|
CSS background-size | CSS プロパティ 値| 意味 使い方 実例 – WebRef