背景に画像などを入れたい！CSSで背景を指定する方法【初心者向け】
初心者向けにCSSで背景を指定・編集する書き方を紹介しています。背景に画像や動画を設置する方法も紹介しています。実際のサイトでもよく見るデザインなのでぜひ使えるようになっておくと良いでしょう。
テックアカデミーマガジンは受講者数No.1のプログラミングスクール「テックアカデミー」が運営。初心者向けにプロが解説した記事を公開中。現役エンジニアの方はこちらをご覧ください。 ※ アンケートモニター提供元：GMOリサーチ株式会社 調査期間：2021年8月12日～8月16日 調査対象：2020年8月以降にプログラミングスクールを受講した18～80歳の男女1,000名 調査手法：インターネット調査
本記事ではHTML要素に対し、CSSで背景を指定する方法を現役エンジニアが解説します。
目次
田島メンター！！サイト全体や各要素の背景に色や画像を設定したいのですが、どうすればいいですか〜？
背景の設定にはbackgroundプロパティを使うんだ。色ならbackground-color、画像を入れるならbackground-imageになるね。
tableとかにも使えますか？
もちろん使えるよ。色コードと画像、それぞれの書き方をみてみよう。
【動画でも解説しています。クリックで見る！】
CSSで背景を編集する書き方
CSSにおける背景の設定は、backgroundプロパティ群から操作しましょう。
backgroundプロパティ群には、色を設定するbackground-colorや画像を指定するbackground-imageなど多数あります。
そして、それらをまとめて指定し、省略するbackgroundというプロパティを使うことも可能です。
背景色を指定するbackground-color
background-colorを使用すると、背景の色を変更可能です。
background-color: 色コードまたはカラーネーム;
値の部分には#000000などの色コードやwhiteなどのカラーネームが入り、指定した色が背景色に設定されます。
background-colorの初期値はtransparentです。
この場合、親要素の背景色が適用され、親要素で何も設定されていない場合は白色となります。
背景に画像を指定するbackground-image
background-imageを使用すると、画像ファイルを背景に指定できます。
background-image: url(“画像ファイルへのパス”);
値にはurl(“xxxx”) の形式、画像ファイルへのパスを記述可能です。
パスはhttp://から始まるURLの形でも記述ができます。
CSSファイルと同じサーバ内であれば、相対パスでも記述できます。
その際、相対パスの基準となるのは、この記述をしているCSSファイルが存在するフォルダになるため注意が必要です。
背景の繰り返しを指定するbackground-repeat
background-repeatを使用すると、画像の繰り返しを指定することが可能です。
background-imageと組み合わせて使い、設定できる値は以下のように4つあります。
- repeat：背景画像を縦方向、横方向双方に繰り返し表示する（初期値）
- repeat-x：背景画像を横方向に繰り返し表示する
- repeat-y：背景画像を縦方向に繰り返し表示する
- no-repeat：背景画像を繰り返さず1つだけ表示する
背景の表示位置を指定するbackground-position
background-positionを使用すると、背景画像を横の位置／縦の位置というように表示位置を指定可能です。
横の位置はleft、center、rightを用いて指定できます。
縦の位置はtop、bottom、centerを用いて指定できます。
また、パーセントやピクセル、マイナスの値も指定可能です。
背景のサイズを指定するbackground-size
background-sizeを使用すると、背景画像のサイズを指定することができます。
contain を指定すると、領域に画像全体が収まりきるサイズで表示し、サイズが合わない箇所は余白になります。
coverを指定すると、領域全体を画像が覆いつくすサイズで表示し、サイズがはみ出す箇所は表示されません。
背景の基準位置を指定するbackground-origin
background-originを使用すると、どこを起点として背景画像を表示するか、指定することができます。
- border-box：背景画像は枠線領域の左上を起点とします
- padding-box：背景画像はパディングの左上を起点とします（初期値）
- content-box：背景画像はコンテンツ領域の左上を起点とします
背景の表示領域を指定するbackground-clip
background-clipを使用すると、背景色や背景画像の表示領域を指定することができます。
- border-box：背景画像や背景色は、枠線領域を含んで表示します（初期値）
- padding-box：背景画像や背景色は、パディングの左上を起点とします
- content-box：背景画像や背景色は、コンテンツ領域の左上を起点とします
background-originとbackground-clipはよく似ていますが、対象が違います。
originは背景画像のみが対象ですが、clipは背景色も対象になります。
背景のスクロール固定を指定するbackground-attachment
background-attachmentを使用すると、背景のスクロール固定を指定することができます。
- scroll：背景はスクロールします
- fixed：背景はスクロールしても固定されます
背景をまとめて設定する background
- background-color
- background-image
- background-repeat
- background-position
- background-size
- background-origin
- background-clip
- background-attachment
今まで説明してきた上記を、まとめて1行で指定するプロパティがbackgroundです。
background: red url(image.jpg) no-repeat border-box center/40% 80% content-box
指定したいプロパティの値を、スペースでつなげて記載するのが基本ですが、2つだけルールがあります。
originとclipを両方指定した場合は、先に書いたほうがorigin、後に書いたほうがclipです。
そして、positionとsizeは、スラッシュ/でつなげて書きます。
background-imageで背景グラデーション
background-imageには、画像ファイルだけではなく、グラデーションも指定することができます。
background-image: repeating-conic-gradient(red,black 10%);
例えば、このように記述するだけで、簡単にグラデーションを作ることができます。
基本的な書き方は、下記のルールです。
background-image: グラデーションの種類 ( 色 位置, 色 位置, 色 位置, 色 位置・・・ );
現在指定できるグラデーションは6種類あります。
- linear-gradient() ：棒状のグラデーション
- repeating-linear-gradient() ：棒状のグラデーション 繰り返し
- radial-gradient() ：円状のグラデーション
- repeating-radial-gradient() ：円状のグラデーション 繰り返し
- conic-gradient() ：放射線状のグラデーション
- repeating-conic-gradient() ：放射線状のグラデーション 繰り返し
色は透明色を含むRGBAで指定し、位置は%で指定します。
また、スペースでつなぐことで複数のグラデーションを指定したり、カンマでつなぐことでグラデーションと背景画像をまとめて指定できます。
透明色をつかったグラデーションをうまく組み合わせると、様々なおしゃれな背景を作ることができます。
おしゃれな背景を作れるようになると、Web制作がどんどん楽しくなってきますね。
ここで紹介したbackgroundの使い方はまだまだ序の口、応用方法はもっと奥が深いですよ。
様々な質感を再現するテクスチャにしたり、光沢を出してメタリックにしたり、アニメと組み合わせたりなど。
ぜひいろいろ試しながら、backgroundマスターを目指してくださいね！
画像ファイルへのパスで、相対パスを使うときには少し注意しよう。
CSSファイルからの相対パスを入力するっていうことですね。
次は色コードで指定した場合、画像で指定した場合の例を実際に見ていくよ。
実際にCSSで背景を書いてみよう
background-colorで色を指定する
HTML
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<link rel="stylesheet" href="sample.css" type="text/css">
</head>
<body>
<p>色コード#90ee90の場合</p>
</body>
</html>
CSS
body {background-color: #90ee90; }
画面ではこのように表示されます。
指定した色コード#90ee90が背景色として設定されます(カラーネームの場合はlightgreenが同じものです)。
background-imageで画像を指定する
HTML
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<link rel="stylesheet" href="sample.css" type="text/css">
</head>
<body>
<p>画像を指定した場合</p>
</body>
</html>
CSS
body {background-image: url("photo1.jpg"); }
画面ではこのように表示されます。
ここではCSSと同じディレクトリに”photo1.jpg”という背景用の画像をアップロードし、外部スタイルシート内でその画像ファイルへのパスを指定しています。
背景用の画像よりも画面サイズの方が大きい場合、背景の画像は初期設定では自動で繰り返して表示されるようになっています。
この設定はbackground-repeatプロパティで変更が可能です。
背景画像の表示開始位置は初期設定では一番左上になっています。
この設定はbackground-positionプロパティで変更が可能です。
以上、CSSで背景を指定する書き方を解説しました。
背景に大きく画像や動画があるサイトが最近増えていますが、自分でも作れるようになると楽しいと思えるはずです。
tableに使用するときは、trやth・td、それぞれに違った背景を指定することも可能なんだ。
連続して使いたいパターン画像のときは、background-repeatは必須ではないんですか？
background-repeatの初期値はリピートする値になっているんだ。ただ縦方向のみのリピートなど、細かい設定をしたい場合は使う必要が出てくるね。
なるほど、了解です。ありがとうございました！
CSSを学習中の方へ
これで解説は終了です、お疲れさまでした。
- つまずかず「効率的に」学びたい
- 副業や転職後の「現場で使える」知識やスキルを身につけたい
CSSを学習していて、このように思ったことはありませんか？
テックアカデミーのWebデザインコースでは、第一線で活躍する「プロのWebデザイナー」が教えているので、効率的に実践的なスキルを完全オンラインでしっかり習得できます。
合格率10%の選考を通過した、選ばれたWebデザイナーの手厚いサポートを受けながら、オリジナルのWebサイト制作を完全オンラインでしっかり習得できます。
まずは一度、無料体験で学習の悩みや今後のキャリアについて話してみて、「現役Webデザイナーから教わること」を実感してみてください。
時間がない方、深く知ってから体験してみたい方は、今スグ見られる説明動画から先に視聴することをおすすめします！
プログラミングを独学で学習していて、このように感じた経験はないでしょうか？
- ・調べてもほしい情報が見つからない
- ・独学のスキルが実際の業務で通用するのか不安
- ・目標への学習プランがわからず、迷子になりそう
テックアカデミーでは、このような
学習に不安を抱えている方へ、マンツーマンで相談できる機会を無料で提供
しています。
30分間、オンラインでどんなことでも質問し放題です。
「受けてよかった」と感じていただけるよう
カウンセラーやエンジニア・デザイナー
があなたの相談に真摯に向き合います。
「自分に合っているか診断してほしい」
「漠然としているが話を聞いてみたい」
こんなささいな悩みでも大丈夫です。
無理な勧誘は一切ありません
ので、まずはお気軽にご参加ください。
※体験用のカリキュラムも無料で配布いたします。（1週間限定）
