Technology

[CSS] background-size: cover;でも画像周りに余白ができた時の対応

2021-01-12

メイン画像を貼り付けようとした時にどうしても余白ができてしまった時の対応をメモ。


起こったこと

メイン画像を貼った時に、画面いっぱいに表示させようと思ったのだが、どうしても周りにスペースができてしまった。

background-size: cover;とか、色々調べて見たが、うまくいかず。



解決法は?


body {
   margin: 0;
   padding: 0;
}

ちょっと写真だと違いが見にくいかもしれないけど、after。



原因は?

どうやらスタイルシートのデフォルトの設定で、marginとpaddingが設定されているらしい。


-Technology