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

背景色（background-color）の設定方法

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

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

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

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

.example{background-color:red;}

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

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

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

.example{background:#ffffff;}

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値のコードを知りたい！って時が来ると思います。 というか、必ず来ますｗ なのでそういう時は、16進数をRGBA値に変換してあげます。

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

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

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

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

背景や画像の透過はこちら

• 【css】画像や背景を透過できるopacityとRGBA使い方

背景画像（background-image）を表示しよう

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

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

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

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

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

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

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

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

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

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

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

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

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

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

repeatの表示例

こんな感じでrepeatされちゃいます

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

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

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

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

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

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

.example{
  background-image:url(image/img.jpg);
  background-repeat: 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プロパティで、画面をスクロールする時に背景画像を固定するか、テキストと一緒に移動するか、指定することができます。

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

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

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

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

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

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

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

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

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

.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プロパティでは、背景画像のサイズを指定できます。

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

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

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

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

backgroundに関する設定の省略

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

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

background: #fff url(image/img.jpg) no-repeat scroll left top; 

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