スポンサーリンク

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

2019年4月7日HTML・CSS

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

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

CSSを使って背景色・背景画像を指定する方法
スポンサーリンク

背景色を指定する

CSSbackground-color: 色 ;

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

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

HTML
<span class="ymarker" style="font-size:20px;">
    これは使用例です。
    文字の背景色を黄色にして黄色マーカー風に!
</span>
CSS
.ymarker {
      background-coloryellow;    /*背景色*/
      font-weight:bold;    /*太字*/
}

background

CSSbackground: 色 ;

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

背景画像の指定

CSSbackground-image: url(背景画像のURL) ;

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

背景画像の繰り返し

使用画像:

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

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

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

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

背景画像の表示位置

CSSbackground-position: 横位置 縦位置 ;

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

 表示位置の指定
  • キーワード
    横位置・・・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;    /*背景画像の表示位置(横位置 縦位置)*/
}

表示サイズの指定

CSSbackground-size: 値 ;
 値
  • auto
    自動で大きさを算出して表示(初期値)
  • contain
    縦横比を維持したまま表示領域の最大サイズで拡大/縮小する
  • cover
    縦横比を維持したまま表示領域を完全に覆うように最小サイズで拡大/縮小する
  • 長さを指定
    横 縦の長さをpx、emなどdr指定
  • パーセント(%)
    表示領域に対する背景画像の大きさをパーセント(%)で指定
.sample {
      background-image:url(画像のURL);    /*背景画像*/
      background-repeat:no-repeat;    /*が背景画像の繰り返し*/
      background-position:center center;    /*背景画像の表示位置(横位置 縦位置)*/
      background-size:100px 100px;    /*背景画像の大きさ*/
}

背景画像の固定

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

最後に

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

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

CSScolor: 色 ;
きらり

きらり

背景画像の指定で関係するもの意外とあるんだね!
結耶が忘れるのも無理ないね!
結耶

結耶

きらりもちゃんと覚えてよ~www
応援よろしくお願いします。
      ブログランキング・にほんブログ村へ

お問い合わせはこちら
この記事を書いた人
結耶(ゆうや)

2017年9月からブログを始め、2018年1月にWordPressに変更しました。知識ゼロのから始めた超初心者で、WordPressやHTML、CSSなど勉強したことを書いています。
愛知県在住。多発性硬化症(MS)という難病と闘っています。

登場キャラクター
きらり
きらり

ある日ひょっこり現れ住みついた居候(いそうろう)。今は結耶と一緒にWordPressやアフィリエイトのことを勉強している。
性別は♂ 。どこから来たかは不明。

楽天ROOM