CSSで背景をスタイリングする

2020年12月15日2021年4月10日CSS

背景は面積が大きいため、WebサイトやWebアプリに与える印象はとても大きいです。

そんな背景を整えることができるCSSをみていきましょう。

背景のスタイリングするためのCSS

background-colorで背景の色を指定できます。

background-imageで写真やイラストなどをバックにできます。

background-sizeでcoverとすると縦横比を保持したままなるべく大きく保持できます。

ただし、画面サイズを変えるとわかるのですが、デフォルトだと起点が画面左上となります。

background-position: centerで起点が中心になります。

backgroundは一括指定プロパティです。

<header></header>

header {
  height: 80px;
  /* background-color: pink;
  background-image: url(../img/header.png);
  background-size: cover;
  background-position: center; */
  background: center/cover pink url(../img/header.png);
}