css

CSS 背景画像を画面いっぱい表示する

よくある、背景画像を画面いっぱいに表示する方法を説明します。
以下のような感じです。

全画面表示

まずは、背景画像を使わず、色のついた背景を画面いっぱいに表示させてみましょう。
こんな感じになります。

HTML

以下は、色のついた背景を画面いっぱいに表示するHTMLの例です。
cssファイルは同じディレクトリにあるものとします。
outクラス が色のついた背景を画面いっぱいに表示するクラスになります。

CSS

画面いっぱいに表示する為のcssの記述は以下になります。

bodyタグにはデフォルトのマージンがあるので、bodyタグに margin: 0; を指定しないと、隙間ができてしまうの注意して下さい。

背景画像全画面表示

今度は背景に画像を全画面に表示してみましょう。

背景画像

cssファイルと同じディレクトリに背景画像を保存しておいて下さい。
今回は画像のサイズを 1920 × 1080(ピクセル)にし、ファイル名を “1920_1080.png” としています。

HTML

先ほどの例を使用します。新しいクラス out_imgクラス が背景画像を表示するクラスになります。

CSS

背景画像を表示するクラス out_imgクラス を追記しました。

まとめ

次回は、背景画像の真ん中に文字を表示させてみます。

© DeNnie.Lab All Rights Reserved.