サンプル１（width:400px）

background-sizeを指定しない場合

サンプル２（width:400px）

background-sizeがcoverの場合（横長）
画像のwidthが100%になる

サンプル３（width:400px　height:500px）

background-sizeがcoverの場合（縦長）
画像のheightが100%になる

サンプル４（width:400px）

background-sizeがcontainの場合（横長）
画像のheightが100%になる

サンプル５（width:400px　height:500px）

background-sizeがcontainの場合（縦長）
画像のwidthが100%になる

サンプル６（width:400px）

background-sizeが縦横ともに100pxの場合
画像のサイズも100pxになる

サンプル７（width:400px）

background-sizeが縦横ともに50pxの場合
background-positionが縦横ともにcenterの場合

サンプル９（width:400px）

エレメントの中にさらに画像がある場合
background-sizeは縦横ともに200px

サンプル１０（width:400px）

エレメントの中にさらに画像がある場合
画像には『position:absolute』が指定されている
background-sizeは縦横ともに200px