大阪/梅田のホームページ制作会社 ウェブラボ関西オフィス

【CSS】背景画像を指定しよう

2020/11/19 技術Memo
背景画像を指定しよう

ホームページに画像を貼る際にはimgタグを使ってHTMLベースで記述するのが一般的ですが、CSSを使用すると背景画像として装飾することも可能です。
今回は、背景画像の指定方法についてご紹介します。

背景を構成するプロパティ

背景に関連するプロパティを紹介します。
後述しますが、これらのプロパティはbackgroundプロパティで一括指定することも可能です。

background-colorプロパティ

background-color: #333;

背景色を指定することができます。背景画像の指定もある場合は、背景色が下に敷かれます。
値はカラーコードを指定します。初期値はtransparent(透明)であることに注意してください(noneや#fffではありません)。

background-attachmentプロパティ

background-attachment: scroll;

画面をスクロールした時に、背景画像の位置を固定したままにするか、スクロールに合わせて移動するかどうかを指定することができます。
値はfixed(固定)やscroll(移動)などがあります。初期値はscrollです。

background-imageプロパティ

background-image: url("../img/ico_arw.png");

背景画像を指定します。値はurl(URL)の形です。

background-positionプロパティ

background-position: left center;
background-position: 0% 20px;
background-position: right 40px bottom 20px;

背景画像の位置を指定します。leftやtopなどのキーワードや%値、pxなどの単位の付いた数値でも指定が可能です。
%値や数値は通常左端や上端が開始位置になりますが、 それぞれの値の前に半角スペースを挟んで”right”や”bottom”を指定することで、右端や下端を開始位置にすることができます。

background-positionプロパティの画像

background-repeatプロパティ

background-repeat: repeat;
background-repeat: repeat-x;
background-repeat: repeat-y;
background-repeat: no-repeat;

背景画像を繰り返すかどうか、また繰り返し方法を指定することができます。
値は縦横に繰り返し表示するrepeat、横方向にのみ繰り返すrepeat-x、縦方向にのみ繰り返すrepeat-y、繰り返さないno-repeatがあります。
初期値はrepeatです。

background-repeatプロパティの画像

background-sizeプロパティ

background-size: 60px;
background-size: 30px 60px;
background-size: auto 40px;
background-size: cover;

背景画像のサイズを指定します。
%値、pxなどの単位の付いた数値だけでなく、画像の縦横比を保ったまま最大サイズに拡大縮小されるcontainや、縦横比を保ったまま最小サイズに拡大縮小されるcoverもあります。初期値はautoです。

background-sizeプロパティの画像

背景のスタイルを一括指定できるbackgroundプロパティ

background: #333 url("../img/ico_arw.png") no-repeat left center / cover;

backgroundプロパティは、背景関連のスタイルを一括指定できるプロパティです。
値を指定する順序は問われず、省略も可能です。
ただし、background-sizeを指定する場合は、
background-position / background-size
といった風に位置とサイズを順番に指定し、間をスラッシュで区切る必要があります。

背景画像とWebアクセシビリティ

位置や大きさなど、細かく指定できることは知っていただけたとは思いますが、結局何をimgタグで指定して、何を背景画像にすればよいのか悩むことがあるかもしれません。
背景画像の指定は、一つの観点としてWebアクセシビリティを考えて判断することができます。

背景画像はHTML上で指定しているタグではなく、CSSを使用した装飾です。
そのため、音声支援のツールが背景画像についてユーザーに伝えることはありません。
目の見えない人が知覚できない情報が画像に含まれる場合は、背景として組み込むべきではないので、CSSではなくHTMLのimgタグを指定して、alt属性で説明を記述するようにしてください。

まとめ

背景画像は、背景として利用するだけでなく、paddingなどと併用してアイコンの表示として指定したりすることもできます。
backgroundプロパティで一括指定されているとややこしそうに見えますが、構成しているプロパティを覚えておくと記述を省略できて便利です。ぜひ活用してみてください。

ホームページ制作実績

大阪/梅田を拠点に、京都・奈良・滋賀・兵庫など関西圏はもちろん、 日本全国、さまざまな業種のお客様のホームページを制作しています。

制作実績一覧はこちらから

私たちについて

私たちはお客様の会社のホームページ担当として、 以下のポリシーをもってホームページ制作を行います。

少数精鋭。常に最高のチーム体制で制作します

少数精鋭。
常に最高のチーム体制で制作します

100人のお客様に100通りのプランをご提案します

100人のお客様に
100通りのプランをご提案します

常に正直に、誠実に。きちんとNOとお伝えします

常に正直に、誠実に。
きちんとNOとお伝えします

お客様の「お客様」の視点を大事にします

お客様の「お客様」の
視点を大事にします

格好いい、キレイなだけのデザインはしません

格好いい、キレイなだけの
デザインはしません

「+1」のクリエイティブにとことんこだわります

「+1」のクリエイティブに
とことんこだわります

詳しくはこちらから

スタッフブログ TOP