2019年7月16日プログラミング

CSSで背景に画像を設置する方法！backgrond-imageを使いこなす

みなさんこんにちは！ワトスンです。
今回は、、

背景に画像を入れたい。でもどうやって入れればいいの？background-imageの使い方がわからない

といった疑問に答えます。

CSSで背景を入れることはWebサイト制作にとって必須の技術です。
この記事を読んで、一つレベルアップしてもらえたら嬉しいです。

■読んでほしい人
CSS初心者/HTMLを理解できている方

それではご紹介していきます。

1 CSSで背景画像を設置する
- 1.1 HTMLを用意
- 1.2 CSSで背景を指定
2 背景を設置する際のCSSの説明

CSSで背景画像を設置する

HTMLを用意

まずは背景を設置するための場所を用意しておきます。

例として

<div class="back">ここに背景画像を設置</div>

1	<div class="back">ここに背景画像を設置</div>

を用意します。

CSSで背景を指定

HTMLで要素を用意したので、その要素の背景に画像を設置していきます。
まずは以下のCSSを見て下さい。

.back{ /*背景設置に必要なcss*/
background-image: url(../images/sample.png);  /*入れたい画像のURLを（）の中に入れる*/
background-repeat: no-repeat;  /*画像を繰り返し表示しない場合はno-repeat*/
background-size: cover; /*背景のサイズを指定する*/
background-position: center; /*背景の設置位置を指定*/
}
.back{ /*要素の幅や高さや見た目を指定*/
width: 100%;
height: 500px;
margin-right: auto;  
margin-left: auto;
padding: 20px 50px;
box-sizing: border-box;
}

.back{ /*背景設置に必要なcss*/

background-image: url(../images/sample.png); /*入れたい画像のURLを（）の中に入れる*/

background-repeat: no-repeat; /*画像を繰り返し表示しない場合はno-repeat*/

background-size: cover; /*背景のサイズを指定する*/

background-position: center; /*背景の設置位置を指定*/

}

.back{ /*要素の幅や高さや見た目を指定*/

width: 100%;

height: 500px;

margin-right: auto;

margin-left: auto;

padding: 20px 50px;

box-sizing: border-box;

}

一例ですが、背景を指定するときはこのように設置していきます。

ここからは各設定の意味をご説明していきます。

背景を設置する際のCSSの説明

background-image

background-imageプロパティは、背景画像の画像を指定する値です。

url:例：background-image: url(../images/sample.png);

このように相対パスで指定するか絶対パスで指定します。

background-repeat

background-repeatプロパティは、背景画像の繰り返しの仕方を指定する際に使用する値です。

repeat：縦横に背景画像を繰り返して表示します。これが初期値です。

repeat-x：横方向にのみ背景画像を繰り返して表示します。

repeat-y：縦方向にのみ背景画像を繰り返して表示します。

no-repeat：背景画像を一回だけ表示して繰り返しません。

background-size

background-sizeプロパティは、背景画像のサイズを指定する際に使用する値です。

auto：自動的に算出される（初期値）

contain：縦横比は保持して、背景領域に収まる最大サイズになるように背景画像を拡大縮小する

cover：縦横比は保持して、背景領域を完全に覆う最小サイズになるように背景画像を拡大縮小する

長さ：背景画像の幅・高さをこの順番で指定する //例：background-size: 50px 100px;

%：背景領域に対する背景画像の幅・高さの%を指定する //例：background-size: 80% 100%;

背景画像設置時に必要なCSSプロパティはこんな感じです。
他にも背景に関するCSSプロパティはありますが、最低限以上の３つを理解しておくといいと思います。
背景を設置する技術というのは、ホームページ制作では必須となってきます。

みなさんがこの記事で一つステップアップしていくことができればとても嬉しいです。

なにか疑問点がありましたらコメントまたはTwitterのDMでご連絡ください！

以上です。