Nagashima Laboratory

CSS 背景（background）

背景 background

フォルダ：css_sample_02

背景に関する設定を行うCSSプロパティです。

【準備】

  • 共通で使用するindex.htmlとstyle.cssを用意し、css_sample_02 フォルダの中に入れます（共通のデータとは、CSSの基本で使用したデータです。GitHubからもダウンロードできます）
  • css_sample_02 フォルダの中に、imagesフォルダをつくり、画像を挿入します。サンプル画像は下記からダウンロードしてください。
  • 自分で画像を用意してもかまいません。
  • index.htmlは編集せずそのまま使います

▼style.cssへの追記（既にコードの書かれたstyle.cssにハイライト部分のみを追記をします。元から書かれている設定は残してください）

body {
  background-color: gray;
  background-image: url("images/bg.jpg");
  background-size: cover;
}

/*中略*/

header {
  padding: 40px;
  height: 80px;
  background-image: url("images/pattern.png");
  background-repeat: repeat;
}

/*中略*/

footer {
  padding: 40px;
  height: 40px;
  background-color : black;
  color: white;
  background-image: url("images/logo.png");
  background-repeat: no-repeat;
  background-size: 200px 50px;
  background-position: center bottom;
}

各プロパティの意味

  • background-image 背景画像
  • background-size 背景画像のサイズ 数値で指定するときには、幅、高さの順に指定
    • cover…できるだけ大きく拡大縮小する。何もない空間ができないように、上下または左右が切り取られることがある
    • contain…縦横比を崩さずに可能な限り大きくする（上下または左右があまる可能性がある。余ったところは、画像が繰り返し表示されるか（background-repeatがrepeatになっている場合）background-colorの色が見える
  • background-repeat 背景画像の繰り返し
    • repeat…繰り返し（初期設定）
    • no-repeat…繰り返しなし
    • repeat-x…横方向に繰り返し
    • repeat-y…縦方向に繰り返し
  • background-position 背景画像の位置。横方向・縦方向の順に指定する
    • 例：center top …横方向はcenter（中央）、縦方向はtop（上揃え）
    • 横方向の指定は、left・center・right
    • 縦方向の指定は、top・center・bottom

「background」という、background-image、background-positionなどをまとめて設定できるプロパティもあります。backgroundを使って、footerの設定をまとめて書くと以下のようになります。

footer {
  background: black url("images/logo.png") no-repeat center bottom / 200px 50px;
}

※positionの直後にsizeを指定するときはスラッシュを挟みます

参考リンク

() Category: 資料 Tags: