2019年2月3日ツイートシェアB!はてブポケットコーディング時に意外と使われがちな背景画像のCSSについて紹介です。背景で最も覚えておくべきは「background-size」だと思います。この指定の違いによって表示がどのように変わってくるのか、マウスでドラッグしながら直感的に理解していこうという目的で作成しました。ヒーローイメージや背景固定など、よく使わがちな背景の指定方法についても少しだけまとめました。おわりbackground-sizeのパターンをザックリ理解しようコーディング業務ではbackground-sizeの理解が不可欠です。以下の画像をサンプルに色んなパターンで表示させてみましょう。この記事でタブレットっぽく表現されている箇所はすべて可変です!右下をドラッグして大きさを変えながら背景画像の見え方を確認してみてください。背景画像で覆われていることが保証されている指定なので、とりあえずで使われがちな方法だと思います。右下のドラッグで幅を変更した表示を確認できます。要素の縦横の幅がなんであれ、画像の縦や横の大きさは変わりません。ありのままの画像のサイズがそのまま表示されます。ドラッグしても大きさが変わらないことを確認してもらえたらと思います。右下のドラッグで幅を変更した表示を確認できます。「必ず画像全体が映る」ように、縦横比を維持したまま伸縮します。縦か横のどちらかの幅は要素と同じになります。右下のドラッグで幅を変更した表示を確認できます。指定した縦横の幅にピッタリと伸縮します。右下のドラッグで幅を変更した表示を確認できます。300px;}ヒーローイメージは100vhファーストビューを完全に覆うヒーローイメージは実はめっちゃ簡単に作れます。高さに100vhを指定するだけです。右下のドラッグで幅を変更した表示を確認できます。背景の縦横比を維持するテクニックもあります。これまで紹介したものは縦が固定されています。幅は狭まるけど高さは一定という感じですね。これを幅に応じて高さも変更するという書き方に変更してみます。右下のドラッグで幅を変更した表示を確認できます。65.73%;}padding-topに縦横比のパーセントを指定することで実現できます。縦横比を維持した背景の問題点は高さが0(ゼロ)ということです。高さがゼロなので、上下中央に配置しようとしても思った位置に配置されません。解決策としては、高さを持つ用の要素をもう1つ追加することです。実際に見てみましょう。#fff;}親のpadding-top分の高さを.bg-aspect-inが代わりに持っているという感じですかね(上手く表現できない...)マスク的な感じで覆っているイメージです。その中に上下中央に配置した文字をabsoluteで指定すると思い通りの位置に配置されるようになるので、縦横比を維持した背景を使う際は、この方法を覚えておくといいかもしれません。背景だけスクロールされないようなサイトを見たことがあるかもしれませんが、この実装はめっちゃ簡単です。fixed;を指定するかしないの違いでしかないので、頭の片隅にでも覚えておくといつか使う日がくるかもしれません。466px;}背景の元画像のサイズはどうする?サイト全体を覆うようなデザインもあるかと思います。わたしが最初のころに悩んでいたのは、ここの元画像の幅は何がいいのだろうか...?ということでした。今は自分の中で(勝手に)答えを出していて、ピクセルでいうと、ズバリ1920pxです!理由はシンプルで、一番使われているモニターの横幅が1920pxっぽいからですね。一応この数字を基準にしています。@haniwa008好きなように背景のパターンを並べただけの自己満足的な記事になった感じがします笑コーディングする上で背景画像は意外と使わる部分なので、今回紹介したbackground-sizeの違いは少なくとも理解しておくといいかと思います。リンクこのページが役に立ったらいいね!お願いします運営の励みになります...。【コピペOKのサンプル付き】Flexboxはこの5パターン覚えておけば大...はにわまんWordPressが好きなフリーのWebコーダー。300件以上のWordPressカスタマイズを対応してきました。