【css】背景(backgroundプロパティ)の使い方まとめ

背景(backgroundプロパティ)を使ってみよう
背景(background)を設定しよう

webページの背景(background)は、cssで設定する方法とhtmlで設定する方法があります。 ですがcssで設定した方がhtmlファイルも軽くなるので、cssでのbackgroundの色々な設定方法について紹介していきますね。

ちなみに、背景(background)の使い方を覚えちゃえば、h1の前に矢印とかの記号を付けたり、背景(background)の上に文字を書いたりできるようになります。 特に背景の上に文字を書けるようになると、ネットショップとかで見かけるようなランディングページを作る時に、すっごい使えます(^^♪ このページでは背景の色の設定方法など、背景(backgroundプロパティ)について詳しく紹介していきますね(^-^)

目次
背景画像(background-image)を表示しよう
背景画像を固定する方法(background-attachment)
背景画像の位置を指定しよう(background-position)
背景画像のサイズを指定しよう(background-size)
backgroundに関する設定の省略

背景色(background-color)の設定方法

background-colorを設定しよう

名前の通り背景色の設定方法です。

何も記述してない場合、背景色は透明(transparent使用時と同じ)になってます。

※「transparentって何?」って時は「【css】ボーダー(border)の使い方まとめ」のページ中間付近で紹介してます。

書き方は簡単で、下をコピペして色の部分を自分の好きな色にするだけ。 とっても簡単です!

background-color:red;

redの部分に自分の好きな色を入力して下さい。

background-color入力例
.example{background-color:red;}

ちなみにwebページの背景やテキスト色は、red(赤)blue(青)などのキーワードを使って指定することができます。

それ以外にも、赤(R)、緑(G)、青(B)三原色を数値で指定する方法などがあります。 この方法は赤・緑・青の頭文字をとってRGBと呼ばれてます。

RGBを使う場合は「#〇〇〇〇〇〇」のように16進数を使って、表示する方法が基本的には使われてます。 まー簡単にいうと、「#〇〇〇〇〇〇」の部分をカラーチャートからコピペして使おうねって事ですw(カラーチャートは後ほど紹介)

.example{background:#ffffff;}
色の見本 キーワード指定 16進数で指定 RGBA値で指定
black #000000 rgba(0,0,0,1)
gray #808080 rgba(128,128,128,1)
silver #C0C0C0 rgba(192,192,192,1)
white #ffffff rgba(255,255,255,1)
fuchsia #ff00ff rgba(255,0,255,1)
red #FF0000 rgba(255,0,0,1)
orange #ff6600 rgba(255,102,0,1)
yellow #FFFF00 rgba(255,255,0,1)
lime #00FF00 rgba(0,255,0,1)
aqua #00FFFF rgba(0,255,255,1)
blue #0000FF rgba(0,0,255,1)
purple #800080 rgba(128,0,128,1)
maroon #800000 rgba(128,0,0,1)
olive #808000 rgba(128,128,0,1)
green #008000 rgba(0,128,0,1)
teal #008080 rgba(0,128,128,1)
navy #000080 rgba(0,0,128,1)

RGBA値の使い方

RGBA値というのは、RGBに透明度が指定できるalpha(アルファ)値を追加した形式です。 つまりRGBA値を使うと「色指定と透過ができるよ」ってこと。

rgba(128,128,128,1)
.example{background:rgba(128,128,128,1);}

RGBA値の透明度は0(完全に透明)~1(完全に不透明)の数値を使って指定できます。 例えば、色を半透明にしたいと言う時は、上の「RGBA値の書き方」の「1」の部分を「0.5」と変えてあげると、 指定した色が半透明になります。

薄い透明にしたい時は「1」の部分を「0.1」に変えてあげるとかなり薄い透明になります。 ちなみに、RGBA値をサポートしてないブラウザでは、透明度だけでなく色指定も認識されず無効となるので注意して下さい。 それと、RGBA値で色を指定する場合は必ず「,」(カンマ)で区切りって下さいね。

ブラウザでの表示例
rgba(255,102,0,1)【透明度1】
rgba(255,102,0,0.8)【透明度0.8】
rgba(255,102,0,0.4)【透明度0.4】
rgba(255,102,0,0.2)【透明度0.2】

16進数のカラーコードはわかるけど、色をちょっと透明にしたいからRGBA値のコードを知りたい!って時が来ると思います。 というか、必ず来ますw なのでそういう時は、16進数をRGBA値に変換してあげます。

変換と言っても、コピペするだけなのでとっても簡単!1秒で終わります。

下のサイトで16進数とRGBA値を変換できるので、ご参考までに(^-^)

16進数・RGB・RGBAカラーコード変換ツール

それと、背景の画像を透明にしたい!って時は、下のページで紹介していますので、そちらをご覧ください。

背景画像(background-image)を表示しよう

背景画像を表示しよう

background-imageプロパティは、背景に画像を設定するものです。 名前の通りなんで覚えやすいですよねw

書き方は簡単で、いつもの通り下をコピペして、urlの()内に画像のURLを入れるだけです。

.example{
  background-image:url(image/img.jpg);
}
background-image書き方

urlの()内には画像のURLを入力して、背景を表示したい要素(body、h1など)を「.example」の部分に入力します。 例えばwebページ(body)の背景を変えたい場合は下のように書きます。

body{
 background-image:url(image/img.jpg);
}

これだけで、webページの背景を変える事ができます。 「画像のurl?どこに書いてあるの?」って時は下のようにしてみて下さい。

画像URLの入力方法解説

background-imageのURLの指定方法は、相対パス・絶対パス・サイトルートパスのどれかで指定します。

例えば「http://www.yuu-diaryblog.com/uploads/image.jpg」のような画像のURLがあるとします。 この場合、相対パスで指定すると「../uploads/image.jpg」というふうになります。

絶対パスの場合は「http://www.yuu-diaryblog.com/uploads/image.jpg」というふうにURL全て入力するだけです。 そして、サイトルートパスの場合は「/uploads/image.jpg」のようになります。

「よくわかんねーw」という時は下のページで「相対パス・絶対パス」について詳しく紹介しているのでご覧ください。

背景画像の繰り返しを指定しよう(background-repeat)

繰返しを設定しよう

background-imageでは、背景画像を繰り返すか、繰り返さないかが設定できます。

これは何も設定しなくてもokです。 ですが何も設定しないと(初期の状態)縦横方向に背景画像が繰り返される「repeat」がかかっています。

repeatがかかっていると下のように背景画像が繰り返されちゃいますので、繰り返したくない場合は設定しときましょう。

repeatの表示例
こんな感じでrepeatされちゃいます

では、background-repeatのそれぞれの使い方と書き方を紹介します。

キーワード 意味
repeat 「縦横」に背景画像を繰り返し表示する。初期値
repeat-x 「横」方向にのみ背景画像を繰り返し表示する
repeat-y 「縦」方向にのみ背景画像を繰り返し表示する
no-repeat 背景画像を1回のみ表示する。繰り返えさない
space 背景画像が完全に収まる回数だけ、背景画像の間にスペースを開けて繰り返す。
round 背景画像が完全に収まる回数だけ繰り返す。ただし背景画像を完全に収めるために拡大・縮小される。

repeat

.example{
  background-image:url(image/img.jpg);
  background-repeat: repeat;
}

repeatは初期値なので、記述しなくても繰り返されます。 表示例は先ほどの例を参考にして下さい。

repeat-x

.example{
  background-image:url(image/img.jpg);
  background-repeat: repeat-x;
}

repeat-xは横方向にのみ背景画像を繰り返します。

repeat-xの表示例
repeat-xの表示例

repeat-y

.example{
  background-image:url(image/img.jpg);
  background-repeat: repeat-y;
}

repeat-yは縦方向に背景画像を繰り返します

repeat-yの表示例
repeat-yの表示例

no-repeat

.example{
  background-image:url(image/img.jpg);
  background-repeat: no-repeat;
}

no-repeatは背景画像を繰り返しません。

no-repeatの表示例
no-repeatの表示例

space

.example{
  background-image:url(image/img.jpg);
  background-repeat: space;
}

spaceは背景画像が完全に収まる回数だけ、スペースを開けて繰り返されます。

他のリピートと違ってspaceの場合は、画像が途中で切れません ですが、画像が完全に収まるように画像間のスペースの幅が自動で調整されます。

spaceの表示例2
spaceの表示例

round

.example{
  background-image:url(image/img.jpg);
  background-repeat: round;
}

背景画像が完全に収まる回数だけ繰り返します。 roundも途中で画像が途切れる事がありません。

ですが、見てわかるように画像間にスペースが空きません。 そしてspaceと違って、完全に収めるために背景画像が拡大・縮小されて調整されます。

roundの表示例
roundの表示例

background-repeatは複数記述できる

background-repeatは2つ記述することができます。

どういうことかっていうと、縦方向・横方向のリピートをそれぞれ設定できるってこと。

例えば「repeat、no-repeat、space、round」を一つ記述した場合は、縦横方向 に適用されます。 ですが二つ記述した場合は、最初に記述したのが「横」方向、2番目に記述したのが「縦」方向、という感じで適用されます。

.example{
  background-image:url(image/img.jpg);
  background-repeat: repeat no-repeat;
}

background-repeat: repeat space;

上の場合、横方向はrepeat、縦方向はspaceとなる

background-repeat複数記述の表示例
複数記述の表示例

背景画像を固定する方法(background-attachment)

background-attachmentプロパティで、画面をスクロールする時に背景画像を固定するか、テキストと一緒に移動するか、指定することができます。

例えば、今見てもらっている私のブログの右サイドバーを見て下さい。 画面をスクロールする時に固定されてますよね。 画像でもこんな感じにするか、どうか選べるよって事です。

キーワード 意味
fixed 背景画像を固定する。画面をスクロールしても動かない。(例えば、今見ている私のブログの右サイドバーのように固定される)
scroll 画面のスクロールと一緒に背景画像もスクロールする。初期値。

background-attachmentを設定しない場合は、画面のスクロールと一緒に背景画像もスクロールします。(scrollの状態) なので、背景画像を固定したい!って時は「fixed」を指定しましょう!

.example{
  background-image:url(image/img.jpg);
  background-repeat: no-repeat;
  background-attachment: fixed;
}

背景画像の位置を指定しよう(background-position)

background-positionで背景画像の表示開始を指定できます。 表示位置は、pxなどの単位付きの数値、もしくはパーセンテージ(%)、キーワードなどを使って指定します。

background-position:横の位置 縦の位置;

位置を記述する時は、上のように「横方向」「縦方向」の順で半角スペースで区切って指定します。

「横方向」「縦方向」のように値を2つ書かず、一つしか書かなかった場合は、縦の位置が「auto」になります。

表示位置の基準は「パディングの領域」の左上から始まります。 ちなみに何も設定しない場合は、背景の画像は左上に表示されます。

background-position基準位置
横方向のキーワード 意味
center 中央に表示
left 左に寄せて表示
right 右に寄せて表示
縦方向のキーワード 意味
center 中央に表示
top 上に寄せて表示
bottom 下に寄せて表示

では、実際使って見ると背景画像がどうなるのか見てみましょう!

.example{
  background-image:url(image/img.jpg);
  background-repeat: no-repeat;
  background-position:center top; 
}
center topを使った例
center topを使った例
.example{
  background-image:url(image/img.jpg);
  background-repeat: no-repeat;
  background-position:right center; 
}
right centerを使った例
center rightを使った例

background-positionを記述したのに背景画像が思うような位置にならないって時は、 「横」「縦」の順番に書いてない場合があるので、注意して下さいね(^^♪

background-positionをpxなどの単位付きの数値で指定する場合は、マイナスの値も指定できます。 記述の仕方は、キーワードを指定した時と同じで「横」「縦」の順で記述します。

.example{
  background-image:url(image/img.jpg);
  background-repeat: no-repeat;
  background-position:20px 10px; 
}

background-positionについては、下のページで詳しく紹介します。

背景画像のサイズを指定しよう(background-size)

background-sizeプロパティでは、背景画像のサイズを指定できます。

background-size:幅 高さ;

.example{
  background-image:url(image/img.jpg);
  background-repeat: no-repeat;
  background-size:100px 100px;
}

pxなど単位付きの値などで指定する場合、2つ記述すると記述した順番に背景画像の幅と高さが設定されます。 逆に1つだけしか記述しなかった場合は、背景画像の高さが「auto」になります。

ちなみに、指定したサイズが実際の背景画像のサイズと違う場合は、指定したサイズに合わせて画像が拡大・縮小されます。

キーワード 意味
auto 元の背景画像のサイズで表示。「幅」「高さ」のどちらかだけに「auto」を指定すると、元のサイズの縦横の比率を保ったまま、もう一方に合わせたサイズが設定される。
cover 横縦比を保持して、背景画像のみで表示領域を完全に覆うサイズとなる
contain 横縦比を保持して、常に背景画像の全体が表示されるサイズとなる

background-sizeは、上のようなキーワードでも指定することができます。 ちょっと文字数が多くなりすぎるので、background-sizeについて詳しくは下のページで紹介します。

backgroundに関する設定の省略

backgroundの設定は省略化できます。

backgroudについて、色々紹介してきましたが、全部書いてるとすっごい長くなりますよね。 そして面倒ですw なので記述する時はできる限り省略化しましょう。

background: #fff url(image/img.jpg) no-repeat scroll left top; 
backgground省略の解説

「background-color」「background-image」「background-repeat」「background-attachment」「background-position」って感じで書けます。 記述する順番は、自分の好きな感じで大丈夫ですのでご自由に

背景の使い方を覚えると、かなりデザインのレベルがアップします。

「でも、覚える事多くない?」って思っちゃいますよねw ですが、backgroundプロパティはただ背景について細かく設定できる!ってだけなんで、 実はけっこう簡単だったりします。

それと設定しなくても良い部分も多いので、そんなに覚える必要がなかったりもしますw

backgroundプロパティは、絶対使うと思うので是非参考にしてみて下さいね(^^♪

以上、backgroundについてのまとめでしたー。 長々読んで頂きありがとうございます。 ではまたー(^^)/

頂いたコメント

  1. 莉緒 より:

    ブログランキングからきました。
    CSSやhtmlは難しいイメージがあっていつも挫折してしまって
    いましたが、とても分かりやすく、またチャレンジしてみようと思いました。

    またお邪魔します。
    ランキング応援していきますね(^_^)/

    • ゆう。 より:

      こんにちわー(^^)/

      難しそうで、けっこう簡単なんですよcssって(^^♪
      分かりやすいって言って貰えると、嬉しいです(^-^)

      ぜひチャレンジしてみて下さいねー

      応援ありがとうございます(#^^#)

  2. HARUMIN より:

    こんにちは!ランキングから来ました。

    ブログの背景まで気にしていませんでした。
    これを参考にさせていただきます。
    詳しくてありがたいです。
    応援させていただきます。

    • ゆう。 より:

      こんにちわー(^^♪

      backgroundプロパティは、背景を色々設定できるので、
      使ってると面白いですよ(^-^)

      文字の前に画像とかも貼れたりするので、デザインの幅が広がりますよ(^^)/

      応援ありがとうございます!!
      感謝です