『自分の仕事は自分でクリエイト』を目指す新米クリエイターたちのアウトプット用Webマガジン。得意を活かした企画に挑戦中!

CSS07 スタイルシートの背景画像の指定方法(9分4秒)

スタイルシートの背景画像の指定方法

今回は、スタイルシートの背景画像の指定方法について解説しています。

body要素に指定してページ全体の背景を指定したり、divや見出しなどの特定の要素の背景を指定することができます。

背景画像をどこの位置からどういった繰り返しの方法で表示させるかという細かい指定によりWebページはデザインされています。

概要

  • 背景に画像を表示する
  • 背景画像の繰り返しの指定
  • 背景画像の表示開始位置の指定

補足・ポイント

背景に画像を表示する

スタイルシートでの背景画像の指定には、background-imageプロパティを使います。

background-imageプロパティの値は、URL(パス)の形で指定します。

パスの部分は、絶対パスや相対パスが利用できます。

スタイルシートを外部ファイルにしている場合には、HTMLファイルから見た画像のパスではなく、スタイルシートファイルからみたパスで指定します。

body {
background-image:url("../images/bg.gif");
}

背景画像の繰り返しの指定

スタイルシートでの背景画像の繰り返しの指定には、background-repeatプロパティを使います。

指定したブロックレベル要素のエリアの中で、繰り返す、繰り返さない、縦方向または横方向に繰り返すなどの設定ができます。

repeat
縦横に背景画像を繰り返して表示。(デフォルト)
no-repeat
繰り返さないで背景画像を一回だけ表示。
repeat-x
横方向にのみ背景画像を繰り返して表示。
repeat-y
縦方向にのみ背景画像を繰り返して表示。
body {
background-image: url("../images/bg.gif");
background-repeat: no-repeat;
}

背景画像の表示開始位置の指定

背景画像をどこの位置から表示させるかという指定はbackground-positionプロパティを使用します。

このプロパティの値は、キーワード、%、数値での指定ができます。

body {
background-image: url("../images/bg.gif");
background-repeat: no-repeat;
background-position: right bottom;
}

キーワードでの指定

  • 横方向は、left・center・right
  • 縦方向は、top・center・bottom

といった位置を表すキーワードで指定します。

背景に関する指定をまとめて行う

背景に関する指定をまとめて行うには、backgroundプロパティを使用します。

値は半角スペースで区切ります。

値の指定の順序は任意です。

指定の必要のない値は省略可能です。

body {
background: url("../images/bg.gif") no-repeat top center;
}

今回の動画で使用している背景画像を配布します。ぜひ、挑戦してみてください!

以下からダウンロードできます。

この記事が気に入ったら
いいね ! しよう

福本 智子

フリーランスWebデザイナー・Webスクール講師。 子育てをしながら、趣味で始めたネットショップからWebを活用したビジネスの楽しさにはまり、Web屋の道を歩む。 Web制作業務に加え【Webデザインを学びながらビジネス力も身につける体験型スクール&コミュニティ】を運営。 フリーランスでWebデザイナーを目指す方々のサポートに注力している。

Pocket
LINEで送る

関連記事

Webデザインの参考書を何冊やっても先に進めない方へ

ログイン

新米クリエイターズ Webメディア部

『自分の仕事は自分でクリエイト』を目指す新米クリエイターたちのアウトプット用Webマガジン。

Web・DTPデザイナー・会社員・アルバイト・ライター・ブロガー・主婦・子育てママ...etc。
現在の肩書きは違えど目指すところは皆「フリーランスのWebデザイナー(クリエイター)」

日々の学びやお役立ち情報をブログで発信・アウトプットをしながらWebの世界でコンテンツを配信する、
Webサイトを運営する、アクセスを集めるってどんなことなのか?を体感していきます。

新米クリエイターならではの気づきや学び、Webデザイナーの腕を磨いていく模様をリアルに感じていただけます!