background-position

概要

背景画像の配置を精密に制御できるプロパティです。center、top right などのキーワード、ピクセルやパーセント値、さらに四辺からのオフセット指定にも対応しています。レスポンシブデザインにおける画像のフォーカルポイントの制御や、スプライトシートの表示位置指定に欠かせない機能です。

対応ブラウザ

基本構文

.hero {
  background-position: center top;
}
.sprite {
  background-position: -32px -64px;
}

実務での使いどころ

• 背景画像のフォーカルポイント制御

  ヒーロー画像やカードの背景画像で、最も重要な部分が常に表示されるよう位置を調整できます。

注意点

アクセシビリティ

• 背景画像の位置によってテキストの可読性が変わる場合があります。重要なテキストの背後に適切なコントラストが確保されているか確認してください。

参考リンク

• MDN Web Docs — background-position
• Can I use — background-position