CSS 背景プロパティbackgroundの使い方まとめ

CSS 背景プロパティ backgroundの使い方まとめ

ここでは、CSSの背景プロパティbackgroundの使い方について紹介します。
 

Webページを作るときに、CSSで背景を設定しようとしたんですがやり方がよくわかりません。
 

背景を設定するにはbackgroundを利用します。ここではCSSの背景プロパティ「background」の使い方を説明していきますね。
 
 

【メルマガ登録はこちら!!】
自分でホームページ制作・Web集客したい個人事業主様向けWebスクール・教室

自分でホームページ作成・Web集客したい個人事業主のためのウェブスクール・教室 ウェブストエイト

 

よく使うbackgroundプロパティ

ここで説明するbackgroundプロパティ一覧は下記の通りです。
 

カテゴリプロパティ意味
背景に関するスタイルbackground-color背景の色
background-image背景の画像
background-repeat背景の画像の繰り返し
background-position背景画像の表示開始位置
background-attachment背景画像の固定・移動
background-size背景画像のサイズ
background背景全般

 

背景の色 background-color

背景background:pinkのサンプル
 

背景の色を設定したい場合は「background-color:値;」で設定します。
 

値の色は「blue」や「red」など色を直接指定する方法や16進数表記「#FF0000」、透明度を設定できる「rgba(255,0,0,0.5)」などの指定方法がよく使われます。
 

■表示例
body背景をピンクに設定
 

■上記のソースコード

 
 

背景画像 background-image

背景background-imageが宇宙になるサンプル
 

背景に画像を使いたい時は「background-image:url(画像の場所);」を指定します。
 

画像の場所は、「http://xxxxx.com/xxxx/sample.jpg」のように絶対パスで指定する方法と「images/sample.jpg」のように相対パスで指定する方法があります。
 

■表示例
body背景に画像を設定
 

■上記のソースコード

 
 

HTMLのimgタグと見た目が同じならどちらを使ってもよいんでしょうか?
 

同じ見た目でもimgタグを利用した画像は検索エンジンで「画像」と認識されるのに対して、background-imageで設定した画像はCSSの装飾で設定した「模様・背景」です。

なので、背景・模様など文書として意味を持たない画像を背景に設定する場合はbackground-imgageを利用すると良いですが、文脈の中で紹介するような文書として意味のある画像はimgタグを利用した方が良く、画像検索でも違いが出てくると思います。

 
 

背景画像のリピート・繰り返し:background-repeat

先ほどのbackground-imageで指定した画像は繰り返されていました。

パターン画像などでは背景の繰り返しするパターンが多いですし、繰り返したくない背景画像の場合もあると思います。

リピートの設定は下記のような指定があります。
 

background-repeat:repeat縦横に背景画像を繰り返します(初期値)
background-repeat:no-repeat背景画像を繰り返しません
background-repeat:repeat-x横方向に背景画像を繰り返します
background-repeat:repeat-y縦方向に背景画像を繰り返します。

 

no-repeat 繰り返しなし

■繰り返しなし
css background-repeat:no-repeat; 背景繰り返しなし
 

■上記のソースコード

 
 

repeat-y X方向に繰り返し

■水平方向(エックス方向)に繰り返し
css background-repeat:repeat-x; エックス方向に繰り返し
 

■ソースコード

 

repeat-y Y方向に繰り返し

■垂直方向(ワイ方向)に繰り返し
css background-repeat:repeat-y; ワイ方向に繰り返し
 

■ソースコード

 
 

背景画像の表示開始位置:background-position

css background-position 背景の位置

背景画像の表示開始位置は「background-position」で指定できます。
 

初期値は左上(background-position:left top)です。
 

右上なら「background-position:right top;」のように任意の位置を指定できます。
 

背景位置が左上(初期値)

■背景位置が左上(初期値) background-position:left top;
css background-position:left top; 背景位置が左上(初期値)
 

背景位置が右上

■背景位置が右上 background-position:right top;
css background-position:right top; 背景位置が右上
 

■上記のソースコード

 
 

背景位置が中央

■背景位置が中央 background-position:center center;
css background-position:center center; 背景位置が中央
 

■上記のソースコード

 

省略形で「background-position:center」でも可能です。
 
 

背景位置を%で指定

■背景位置を%で指定することもできます。 background-position:80% 20%;
css background-position:80% 20% 背景位置を%で指定
 

■上記のソースコード

 
 

背景画像の固定・移動:background-attachment

背景画像をスクロールしても固定したい時は「background-attachment:値;」で設定できます。
 

初期は、スクロールすると背景画像も移動しますが、背景画像をスクロールしても固定させるためにはbackground-attachment:fixed;を利用します。
 

カテゴリプロパティ意味
background-attachment:scrollスクロールすると背景画像も移動する。初期値
background-attachment:fixed背景画像をスクロールしても固定させる

 

■背景をスクロールしても固定に設定 background-attachment:fixed

 

■ソースコード

 
 

背景画像のサイズ background-size

背景画像のサイズはbackground-sizeで指定することができます。
 

よく使う設定値は下記の通りです。

カテゴリプロパティ意味
background-size:auto自動算出(初期値)
background-size:contain縦横比を保持して背景領域に収まる最大サイズになるよう拡大縮小する
background-size:cover縦横比は保持して背景領域を完全に覆う最小サイズになるよう背景画像を拡大縮小する

 

■background-size:contain
縦横比を保持して背景領域に収まる最大サイズになるよう拡大縮小する
background-size:contain
 

■background-size:cover
縦横比は保持して背景領域を完全に覆う最小サイズになるよう背景画像を拡大縮小する
background-size:cover
 

背景設定をまとめて設定 background

これまでのbackground-xxxxxはbackgroundでまとめて指定することができます。
 

■表示例

 
 
なお「background」でbackground-sizeもまとめて指定する場合は、background-positionの値を指定した後に「/」を入れる必要があるようです。
 

■使用例
background:url(https://webst8.com/blog/wp-content/uploads/2017/07/earth.jpg) center /cover;
 

■上記のソースコード

 

ややこしいので、まずはbackground-sizeはbackgroundで指定せずに、background-sizeで指定するようにしましょう。
 

 

まとめ

ここでは、CSSを勉強している初心者の方向けに、背景backgroundプロパティの使い方について紹介しました。
 

背景の使い方は、自分の作りたいデザインを作る第一歩ですのでぜひ使い方を覚えておいてください。
 

【メールマガジンにて限定情報配信】
WordPressやホームページ作成、SEO対策・ウェブ集客に関するウェブストエイトの独自ノウハウを読者限定で配信しています。まずはお気軽にご登録ください。

詳細はこちら

今回は以上になります。最後までご覧いただきありがとうございました。
 

【メルマガ登録はこちら!!】
自分でホームページ制作・Web集客したい個人事業主様向けWebスクール・教室

自分でホームページ作成・Web集客したい個人事業主のためのウェブスクール・教室 ウェブストエイト

 

大阪の個別指導Webスクール
「WEBST8」

個人事業主様・経営者様・起業副業など
自分のビジネスのために
ホームページの作り方を
習得するスクール

\ 自分で作る選択を! /

詳しくはこちら

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

CAPTCHA


ABOUTこの記事をかいた人

松本慶

【IT業界でシステムエンジニア歴8年現役Web系フリーランス】

1985年生まれ 立命館大学卒業。 某複合機メーカーで約8年間システムエンジニアとして大阪で勤務後、2016年秋に独立。

「一人一人が創意工夫で思い描く未来を!」 という想いもとに『自分でホームページを作成してWeb集客・売上拡大したい』個人事業主のためのWeb教室・スクール「ウェブストエイト(Webst8)を運営開始。
ウェブやマーケティングなどの覚えたノウハウを自分や周りの目標実現のツールとして使うことにやりがいを感じています。

メルマガ登録はこちら

個人事業主のためのWeb教室・スクール「ウェブストエイト」 ホームページ