ここしばらくの間フルスクリーン画像を使ったサイトデザインの人気が高まっています。 実は「背景画像の上にボタンを設置するデザイン」というのは少し厄介で、レスポンシブ化する際に幾分かの調整が必要になります。 今回はこの「背景画像の上にボタンなどのコンテンツを、『中央寄せ』で配置する」方法を3パターンご紹介します。 それぞれメリット・デメリットがありますので、使用したい場面にあわせてお使いください。 この方法では画像をimgタグで記述し、上に表示されるコンテンツをposition:absoluteで移動させます。 おそらく最もシンプルで用いられることが多いパターンではないかなと思います。 画像を中心に配置することができますので、比較的シンプルに実装させることが可能です。 デメリットとしては、absoluteさせたコンテンツをセンタリングさせるために若干HTMLとCSSが複雑になることがあります。