「background-imageプロパティ」CSSで背景に画像を表示する

Webページの背景には、色を付けることができますが、画像を表示することも可能です。画像を使用すれば、単色では再現できない複雑な模様なども背景にすることができます。他のサイトと差をつけるのに最適ですから、背景に画像を取り入れても良いかもしれません。

画像の表示方法は、タイルのように連続して繰り返したり、指定位置にピンポイントで配置したりと2つのやり方があります。サイトに合わせて表現方法を変えることができますから、全体のイメージに合わせて利用してみてください。

ここでは、CSSで背景画像を指定する方法を紹介します。

 

背景画像を表示する方法(background-image)

背景に画像を表示するには、「background-imageプロパティ」を使用します。これは、ブロックレベル要素やインライン要素を問わず使用できますから、見出しや段落の背景や特定のキーワードの背景のみを変えることも可能です。

記述方法としては、以下のようになります。

h1 {background-image: url(画像ファイル名); }

上記の記述だと、見出し1の背景を画像にすることができます。

 

背景画像の繰り返しを指定する(background-repeat)

基本的に、背景画像は繰り返しの指定をして使うことが多いです。つまり、同じ画像を縦横に連続して繰り返すことで、1枚の背景のように見せているわけですね。その繰り返し指定には、「background-repeatプロパティ」を使用します。

repeat-x 横方向に繰り返し
repeat-y 縦方向に繰り返し
no-repeat 繰り返し無し

たとえば、以下のような記述をしてみます。

【CSS】
p.repeat-x {background-image: url(https://sabasaba-club.com/wp/wp-content/uploads/2014/10/back-sample.gif);
background-repeat: repeat-x; }

p.repeat-y {background-image: url(https://sabasaba-club.com/wp/wp-content/uploads/2014/10/back-sample.gif);
background-repeat: repeat-y; }

p.no-repeat {background-image: url(https://sabasaba-club.com/wp/wp-content/uploads/2014/10/back-sample.gif);
background-repeat: no-repeat; }



【HTML】
<p class=”repeat-x”>横に繰り返し</p>

<p class=”repeat-y”>縦に繰り返し</p>

<p class=”no-repeat”>繰り返し無し</p>

下の結果を見ると、段落の中で背景画像が表示されていますね。繰り返しの指定によって、表示がかなり変化します。

横に繰り返し

縦に繰り返し

繰り返し無し

 

画像の表示位置を指定する(background-position)

背景画像を繰り返さずに、ピンポイントで表示位置を指定することもできます。左上を基準として、画像の表示位置を調節します。記述方法としては、以下の3つがあります。

パーセント 横方向と縦方向をパーセントで表す
「background-position: 50% 100%;」
キーワード 横方向を「left」「center」「right」
縦方向を「top」「center」「bottom」
ピクセル 横方向と縦方向をピクセル表記で示す
「background-position: 30px 60px;」

 

スクロール位置を指定する(background-attachment)

Webページが縦長だった場合、下にスクロールすることがありますよね。その際に、背景画像の挙動を制御することもできます。つまり、ページをスクロールした時に、背景画像も一緒に動くようにするか、固定して動かないようにするかです。

スクロールの指定には、「background-attachmentプロパティ」を使用します。値を「fixed」にすると、スクロールしても背景画像は動かなくなります。そして、「scroll」にすれば、背景画像も一緒に動くようになります。

 

以上、背景画像の表示について解説をしました。表示方法にも色々ありますから、自分のWebページの印象に合わせた画像を使用するようにしてください。サイト全体のイメージに関わる部分ですから、かなり重要な要素だといえます。

サブコンテンツ

このページの先頭へ