【CSS】WEBサイトの背景を好きな画像に指定するやり方
WEBサイトの背景を画像にしてるサイトはたくさんあります。

それほどWEB製作の基本中の基本なのでやり方を覚えておきましょう。

背景画像はCSS「background-image」を使用

WEBサイトの背景を画像にしたい場合「background-image」使用します。

「画像なのだからHTMLでしょ」と思うかもしれませんが、背景画像についてはCSSで指定します。

background-image: url( 画像ファイルのURL );

背景画像を指定するにはbackground-image: url(画像URL);を使用します。

WEBサイト全体に背景画像を使用する場合は、bodyに対してbackground-imageで指定します。

【注意】
背景画像はCSSファイルがあるフォルダに入れておかないと正常に表示されないので気をつけよう。

background-repeat

background-imageで背景画像を指定すると、同じ背景画像が繰り返し表示されます。

background-repeat: no-repeat;を指定して、背景画像の繰り返し表示をやめさせましょう。

background-size

background-sizeで背景画像のサイズを指定できます。

サイズの指定には「px」「%」で数字を当てはめる他にも「auto」「cover」「contain」があります。
auto 元の画像と同じサイズ
cover 縦横の比率を保ったまま、要素に合わせたサイズになる
contain 縦横の比率を保ったまま、要素に全て表示される
画像サイズに合わせて使用しましょう。

background-position: ○;

background-positionで背景画像の位置を指定できます。
top 上端に揃える
bottom 下端に揃える
left 左端に揃える
right 右端に揃える
center 真ん中に配置する
「px」「%」でも位置を指定する事ができます。

background-attachment

デフォルトの状態では、背景画像がスクロールに伴って移動します。

背景画像を固定するには「background-attachment: fixed;」を指定します。  

Twitterでフォローしよう

おすすめの記事