[CSS] 背景画像の特定の位置を常に画面中央に配置する

backgroundプロパティだけでやるより融通がきくやつ。

See the Pen centering background image by Tenderfeel (@Tenderfeel) on CodePen.

サンプルの猫画像は縦長(1600×2400)のものを使って、猫の顔が常に画面に入るように指定している。

positionとtrasnform操作すれば画面に映す場所の指定ができる。
たとえば上固定して下を伸ばすなら top:0; bottom: auto; transform: translate(-50%, 0); となる。

コメントを残す

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください