background-originについて
背景の開始位置を決めることができるプロパティです。
border-box、padding-box、content-boxと値をとることができます。初期値はpadding-boxです。
さっそく見ていきましょう、ということで以下のようなものを作ってみました。
上のブロックはボーダーが上下左右30px、パディングも上下左右30pxとなっています。背景はグレー、ボーダーとコンテンツ部分にそれぞれ不当明度60%の黒と白を置いています。
背景としてフルール・ド・リスを左上にノーリピートで置いてます。ラジオボタンを切り替えるとbackground-originの値が切り替わり、背景の開始位置が変わっているのが分かるかと思います。
ちなみにノーリピートを外すと以下のような動作になります。同じようにラジオボタンを操作してみてください。リピートの起点(背景の開始位置)が変わっているのが分かりやすいかと思います。
で、結局このbackground-originに何の使い道があるのかなんですが、サイト製作者はよくわかっていません。いい使い道があったら教えてください。