1. HTMLで背景画像を作る基本的な方法
最初に HTML で背景画像を作る基本的な方法について記載します。
HTML タグに背景画像を表示するためには、CSS プロパティのbackground-imageやbackground-repeatを使用します。
| HTML プロパティ | 説明 |
|---|---|
| background-image | 画像のURLを指定する |
| background-size | 背景画像のサイズを指定 |
| background-repeat | 背景画像の繰り返しの指定 |
| background-position | 背景画像の位置を指定 |
background-image で表示したい背景画像を指定する
HTML を次のようにシンプルなものにしておきます。
"index.html":
<!DOCTYPE html> <html jang="ja"> <head> <title>背景画像のテスト</title> <link rel="stylesheet" href="style.css"> <meta charset="UTF-8"> </head>
<body> <h1>背景画像の例</h1> <p>背景画像を設定するには、CSSの background-image プロパティを使用します。</p> </body> </html>
この時点でこんな表示です。
CSS で背景画像を指定します。
"sytle.css"
body {
background-image: url("backgroud_image.png");
}
表示はこうなりました。（画像は copiot に作成してもらいました）
文字が見えないので、文字色を白に変更します。
"sytle.css":
body {
background-image: url("backgroud_image.png");
color: white;
}
こんな感じになりました。
background-size で背景画像サイズを変更する
backgroud-size を使って背景画像のサイズを小さく設定します。
"sytle.css":
body {
background-image: url("backgroud_image.png");
color: white;
background-size: 300px auto;
}
背景画像が小さくなって、繰り返し表示していることを確認できます。
| 値 | 意味 | 使用例 |
|---|---|---|
| auto | 画像の元サイズをそのまま使う（デフォルト） | background-size: auto; |
| cover | 要素全体を覆うように拡大・縮小（縦横比を維持） | background-size: cover; |
| contain | 要素内に収まるように拡大・縮小（縦横比を維持） | background-size: contain; |
| 数値指定（px, %, em など） | 幅・高さを個別に指定 | background-size: 100px 50px; |
| 1値指定（幅のみ） | 高さは自動調整される | background-size: 100%; |
| 複数背景の場合 | カンマ区切りでそれぞれ指定 | background-size: cover, contain; |
background-repeat で繰り返し表示される背景画像を制御する
背景画像が HTML の要素より小さいと繰り返し表示されます。繰り返しをなくすために background-repeat を使います。
background-repeat: no-repeat; を加えることで次のように背景画像を１回のみ表示するようになりました。
"sytle.css":
body {
background-image: url("backgroud_image.png");
color: white;
background-size: 300px auto;
background-repeat: no-repeat;
}
| 値 | 意味 | 使用例 |
|---|---|---|
| repeat | 水平・垂直方向に繰り返す（デフォルト） | background-repeat: repeat; |
| repeat-x | 水平方向だけ繰り返す | background-repeat: repeat-x; |
| repeat-y | 垂直方向だけ繰り返す | background-repeat: repeat-y; |
| no-repeat | 繰り返さない（画像を1枚だけ表示） | background-repeat: no-repeat; |
| space | 画像を間隔を空けて繰り返す（余白を均等に） | background-repeat: space; |
| round | 画像サイズを自動調整して要素全体にぴったり収める | background-repeat: round; |
background-position で画像の表示位置を調整する
backgroud-position で画像の表示位置を設定できます。
background-position: top center; を加えることで次のように背景画像を上部中央に表示しました。
"sytle.css":
body {
background-image: url("backgroud_image.png");
color: white;
background-size: 300px auto;
background-repeat: no-repeat;
background-position: top center;
}
| 値 | 意味 | 使用例 |
|---|---|---|
| left | 左寄せ | backgroud-position: left; |
| right | 右寄せ | backgroud-position: rigth; |
| top | 上寄せ | backgroud-position: top; |
| bottom | 下寄せ | backgroud-position: bottom; |
| center | 中央 | backgroud-position: center; |
※ デフォルトは "left top" です
2. 背景画像を全画面表示する
背景画像を全画面表示(画面いっぱいに)するためには、画像のサイズが横幅も高さも100%にする必要があります。
このような背景画像を実装するには次のようなコードを書きます。
- height で 100vh を指定すると画面の高さが100%となりフルスクリーン表示できます。
- これだけで背景画像を全画面表示できましたが、上下スクロールバーを表示するようになったので overflow: hidden; を追加してみました。スクロールバーの表示が気にならない場合は不要です。margin の調整でもスクロールバーを消すことができそうです。
"index.html":
<!DOCTYPE html> <html jang="ja"> <head> <title>背景画像のテスト</title> <link rel="stylesheet" href="style.css"> <meta charset="UTF-8"> </head>
<body> <h1>背景画像の例</h1> <p>背景画像を設定するには、CSSの background-image プロパティを使用します。</p> </body> </html>
"sytle.css":
html, body {
overflow: hidden;
}
body {
width: 100%;
height: 100vh;
background-image: url("backgroud_image.png");
color: white;
background-repeat: no-repeat;
background-size: cover;
}
3. 背景画像を透過させて薄く表示する
画像の上に文字を置くとどうしても文字が見にくくなることがあります。
そのような場合に背景画像を透過させて薄くすることで文字を見やすくすることができます。
方法１
backgroud-image を以下のように設定します。半透明白のレイヤーの後に "backgroud_image.png" を重ねる複合レイヤーを構成しています。
background-image: linear-gradient(rgba(255, 255, 255, 0.5), rgba(255, 255, 255, 0.5)), url("backgroud_image.png");
"index.html":
<!DOCTYPE html> <html jang="ja"> <head> <title>背景画像のテスト</title> <link rel="stylesheet" href="style.css"> <meta charset="UTF-8"> </head>
<body> <h1>背景画像の例</h1> <p>背景画像を設定するには、CSSの background-image プロパティを使用します。</p> </body> </html>
"sytle.css":
html, body {
overflow: hidden;
}
body {
width: 100%;
height: 100vh;
background-image: linear-gradient(rgba(255, 255, 255, 0.5), rgba(255, 255, 255, 0.5)), url("backgroud_image.png");
color: black;
background-repeat: no-repeat;
background-size: cover;
}
方法２
- 背景画像のみを半透明にするために body::before 疑似要素をつかいます
- CSSプロパティの opacity を設定して半透明にしてみます
- 擬似要素を使う場合は content および position の設定をしましょう
"index.html":
<!DOCTYPE html> <html jang="ja"> <head> <title>背景画像のテスト</title> <link rel="stylesheet" href="style.css"> <meta charset="UTF-8"> </head>
<body> <h1>背景画像の例</h1> <p>背景画像を設定するには、CSSの background-image プロパティを使用します。</p> </body> </html>
"sytle.css":
html, body {
overflow: hidden;
}
body {
width: 100%;
height: 100vh;
color: black;
background: transparent;
z-index: 0;
}
body::before {
content: "";
position: fixed;
inset: 0;
background-image: url("backgroud_image.png");
background-repeat: no-repeat;
background-size: cover;
opacity: 0.5;
z-index: -1;
}