背景に画像などを入れたい!CSSで背景を指定する方法【初心者向け】

初心者向けにCSSで背景を指定・編集する書き方を紹介しています。背景に画像や動画を設置する方法も紹介しています。実際のサイトでもよく見るデザインなのでぜひ使えるようになっておくと良いでしょう。

TechAcademyマガジンはオンラインのプログラミングスクールTechAcademy [テックアカデミー]が運営する教育×テクノロジーのWebメディアです。初心者でもすぐ勉強できる記事が2,000以上あります。

CSSで背景を指定・編集する書き方を紹介しています。

背景の色を変えたり、背景に画像や動画を入れてみたりと背景だけでもサイトの印象が大きく変わります。

ぜひ自分でも背景を編集してみましょう。

 

なお本記事は、TechAcademyのWebデザインオンラインブートキャンプのカリキュラムをもとに執筆しています。

 

なお、今回の記事の内容は動画でもご覧いただけます。

テキストよりも動画の方が理解しやすいという場合はぜひご覧ください。

 

大石ゆかり

田島メンター!!サイト全体や各要素の背景に色や画像を設定したいのですが、どうすればいいですか〜?

田島悠介

背景の設定にはbackgroundプロパティを使うんだ。色ならbackground-color、画像を入れるならbackground-imageになるね。

大石ゆかり

tableとかにも使えますか?

田島悠介

もちろん使用することができるよ。色コードと画像、それぞれの書き方を見てみよう。

 

CSSで背景を編集する書き方

背景の色を変更したり、画像を使用したりする際には「backgroundプロパティ」を使用します。

 

背景色を指定する場合

background-colorを使用すると、背景の色を変更することができます。

background-color: 色コードまたはカラーネーム;

値の部分には#000000などの色コードか、whiteなどのカラーネームが入ります。指定した色が背景色に設定されます。

background-colorの初期値はtransparentとなっています。この場合親要素の背景色が適用されます。親要素で何も設定されていない場合は白色になります。

 

背景に画像を使用する場合

background-imageを使用すると、あらかじめサーバーにアップロードしている画像を背景に指定することができます。

background-image: url("画像へのパス");

値の部分には背景に使用する画像ファイルへのパスを入力します。cssファイルと画像ファイルが同じディレクトリ内にある場合はファイル名のみでOKです。

画像ファイルへのパスは絶対パスと相対パスのどちらでも可です。

相対パスで入力する場合はhtmlファイルからの相対パスではなく、外部スタイルシートからの相対パスを入力します。

 

田島悠介

画像ファイルへのパスで、相対パスを使うときには少し注意しよう。

大石ゆかり

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が同じものになります)

bg_p_1

 

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プロパティで変更が可能です。

bg_p_2

 

以上、CSSで背景を指定する書き方を解説しました。

背景に大きく画像や動画があるサイトが最近増えていますが、自分でも作れるようになると楽しいと思えるはずです。

 

田島悠介

tableに使用するときは、trやth・td、それぞれに違った背景を指定することも可能なんだ。

大石ゆかり

連続して使いたいパターン画像のときは、background-repeatは必須ではないんですか?

田島悠介

background-repeatの初期値はリピートする値になっているんだ。ただ縦方向のみのリピートなど、細かい設定をしたい場合は使う必要が出てくるね。

大石ゆかり

なるほど、了解です。ありがとうございました!

また、現役エンジニアから学べる無料のプログラミング体験会もオンラインで実施しているので、ぜひ参加してみてください。

[お知らせ]TechAcademyでは初心者でも最短4週間でオリジナルWebサイトを公開できるWebデザインオンラインブートキャンプを開催しています。