スポンサーリンク

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

2019年4月7日

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

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

 

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

 

背景色を指定する

CSSbackground-color: 色 ;

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

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

HTML

 

CSS

 

background

CSSbackground: 色 ;

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

 

スポンサーリンク

 

 

背景画像の指定

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

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

背景画像の繰り返し

使用画像:

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

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

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

 

背景画像の表示位置

CSSbackground-position: 横位置 縦位置 ;

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

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

 

 

表示サイズの指定

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

 

 

背景画像の固定

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

 

 

最後に

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

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

CSScolor: 色 ;

 

きらり

きらり

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

結耶

きらりもちゃんと覚えてよ~www

 

スポンサーリンク

 

応援よろしくお願いします。
      ブログランキング・にほんブログ村へ
   Blog People
お問い合わせはこちら
この記事を書いた人

結耶(ゆうや)

2017年9月からブログ、アフィリエイトを知識ゼロから始めたまだまだ駆け出しです。ブログやWordPress、アフィリエイトを勉強しています!
多発性硬化症(MS)という難病と闘っています。