creatersnest

【CSS】今流行りの、背景いっぱいに画像を表示する方法


自分の Web ページをもっとカッコ良く見せたい!
最近流行りの背景いっぱいに画像が表示されるあの Web ページ…

「作ってみたいなぁ…」

じゃあ、作ってみましょう!

とりあえず HTML を書いておく

ブラウザ上に表示される文字などをとりあえず、HTML で記述しておきましょう。

では、本題の CSS のコーディングに入っていきましょう!

いよいよ CSS を記述!

まずは、画面いっぱい、つまり Web ページの body すべてに画像を表示するので、
CSS は body に適用させます。

いよいよ背景画像が表示されるようにしていきますが、
今回は CSS の background プロパティを使用します。

テンプレートは次の通りです。

① color
color 項目には #f2f2f2 などというようにカラーネームで色を指定します。
② image
image 項目には背景に指定したい画像のパスを入力します。
今回のサンプルには URI (URL) で記述しています。
③ repeat
repeat 項目には image 項目で指定した画像のリピートの仕方を指定します。
④ attachment
attachment 項目にはブラウザで画面がスクロールされた際に、
背景画像をそのままの位置で表示させたままにしておくか、
それとも画面のスクロールとともに移動するかどうかを指定します。
⑤ position
position 項目には背景画像の表示開始位置をどうするか指定します。

 

さて、background プロパティには5つの項目を指定しますが、
指定の必要がない項目に関しては記述を省略することが可能になっています。
省略を行う際でも、上記の順番を守って記述してください。

では、今回のサンプルページの CSS を入力するとこのようになります。

ここで一度プレビューを行ってみましょう。

プレビューで確認!……あれ…?

 

スクリーンショット 1

画像が画面サイズにぴったりじゃない…・゚・(つД`)・゚・

実は先ほど記述した background プロパティ、
「背景画像のサイズを指定する」ことができないんですよね。

ここで background-size プロパティを使用します。
修正を行った CSS はこちらです。

background-size プロパティに cover を指定しました。

cover は画像の縦横比を維持しつつ、
ブラウザ上の背景を完全に覆う最も小さいサイズになるように
背景の画像を自動で拡大、縮小をする という値となっています。

ここでプレビューを確認してみましょう。

スクリーンショット 2

 

キタ*・゜゚・*:.。..。.:*・゜(゚∀゚)゚・*:.。. .。.:*・゜゚・*!!!!
…んっ?

確かに成功しましたが、
このままだとテキストのせいで一気にダサい Web ページになってしまいますね…。
修正を加えましょう。

最後の仕上げ!

それでは、最後の仕上げとして、HTML と CSS に手を加えていきます。
background プロパティに変更は加えませんし、
変更内容も基本的なものですので、サンプルコードのみ掲載しておきます。

プレビューしてみましょう。

スクリーンショット 3

完璧ですね。
とっても綺麗な Web ページが完成しました!

最後に

お疲れ様でした。背景いっぱいに画像を表示する CSS、
思ったより簡単だったのではないでしょうか?

ただし、この表現方法、各ユーザーの PC などのディスプレイによっては
画像の解像度のせいで汚く見えてしまうことがありますので、
指定する画像には十分な注意が必要です。

本サイトが運営するWebデザインのオンラインスクールが公開中!
以下のリンクからお申込みで、特別料金の70%OFF!

未経験からプロのWebデザイナーになる! 400レッスン以上の完全マスターコース
こちらのコースは全くの未経験の方が、プロのWebデザイナーとして働けるレベルになることを目的としたコースです。
・全422レッスン & 42時間! 通学スクール80万円相当の内容
・授業×チャレンジ課題で実践的なスキルが身につく!
・過去1100名以上のスクール卒業生を輩出した、 Webサービス運営企業・デザイナー輩出企業だからこそ作れるプログラム

Webやアプリの最新デザインツール Sketch3 |100レッスンの完全マスターコース
Sketch3未経験からプロレベルを目指す、充実したコースです。
Sketch3の単なる機能説明をするような、つまらないコースではなく、アイコン制作、ボタン作成、メインビジュアル制作、Webページの制作など、実際の制作をしながら実践力を身につけます。
1000名以上の卒業生がいる実績ある日本のWebデザインスクールが提供しています。


Hello world! mlooking です!読み方は エムルッキング 。いろいろな情報を伝えられたらいいかなと思っています。

Next Articleレスポンシブなグリッドレイアウトのサイト20選