CSSを使って背景色・背景画像を設定する方法

2019年4月7日2019年12月21日HTML・CSS

今回は『CSSを使って背景色・背景画像を設定する方法』について書きたいと思います。

背景色を設定するのはサイトを運営する上で基本中の基本です。「そんなの知ってるよ～！」という人が多いと思います。
このブログは忘れっぽい私の備忘録も兼ねているのでお付き合い下さいw

背景色を指定する

「色」の指定には「#FFFFFF」カラー名(white)で指定します。
また、色を『transparent』にすると透明になります。(『transparent』が初期値なので背景色を指定しないのと同じということです。)

これは使用例です。
文字の背景色を黄色にして黄色マーカー風に！

<span class="ymarker" style="font-size:20px;">
    これは使用例です。
    文字の背景色を黄色にして黄色マーカー風に！
</span>

.ymarker {
      background-coloryellow;    /*背景色*/
      font-weight:bold;    /*太字*/
}

background

『background』でも同様に背景色を設定できます。(色の指定方法も同じです。)

背景画像の指定

背景画像の指定には『background-image』を使用します。
値は『url( )』(  )内に画像のURLを入力してください。

背景画像の繰り返し

background-imageで背景を指定するとこのように背景画像が繰り返し表示されます。

• repeat
  縦横方向に繰り返す(初期値)
• repeat-x
  横方向に繰り返し
• repeat-y
  縦方向に繰り返し
• no-repeat
  繰り返ししない

「background-repaeat」を使うと横方向のみ、縦方向のみ、繰り返しなしにすることができます。

.sample {
      background-image:url(画像のURL);    /*背景画像*/
      background-repeat:no-repeat;    /*が背景画像の繰り返し*/
}

背景画像の表示位置

位置の指定はキーワード、パーセント(%)などを使います。

• キーワード
  横位置・・・left | center | right   (左 | 中央 | 右)
  縦位置・・・top | center | bottom   (上 | 中央 | 下)
• パーセント(%)
  横位置・・・0 | 50% | 100%   (左 | 中央 | 右)
  縦位置・・・0 | 50% | 100%   (上 | 中央 | 下)
• 数値
  横方向、縦方向の位置(距離)をpx、emなどでも指定できます。

.sample {
      background-image:url(画像のURL);    /*背景画像*/
      background-repeat:no-repeat;    /*が背景画像の繰り返し*/
      background-position:center center;    /*背景画像の表示位置(横位置 縦位置)*/
}

表示サイズの指定

• auto
  自動で大きさを算出して表示(初期値)
• contain
  縦横比を維持したまま表示領域の最大サイズで拡大／縮小する
• cover
  縦横比を維持したまま表示領域を完全に覆うように最小サイズで拡大／縮小する
• 長さを指定
  横 縦の長さをpx、emなどdr指定
• パーセント(%)
  表示領域に対する背景画像の大きさをパーセント(%)で指定

.sample {
      background-image:url(画像のURL);    /*背景画像*/
      background-repeat:no-repeat;    /*が背景画像の繰り返し*/
      background-position:center center;    /*背景画像の表示位置(横位置 縦位置)*/
      background-size:100px 100px;    /*背景画像の大きさ*/
}

背景画像の固定

• fixed
  背景画像は固定されます。スクロールしても背景画像は動きません。
• scroll
  背景画像は固定されず、スクロールすれば背景も動きます。

最後に

背景色や背景画像の指定はいろいろなところで使う基本的なものです。

背景色や背景画像を指定した場合は文字色も背景に合うものに変更を忘れないようにしてくださいね。