19.
バックグラウンドイメージ
バックグラウンドイメージ
backgroundで背景色を指定しましたが、バックグラウンドイメージ（背景画像） を表示することもできます。
imgタグとの違い
imgタグは単に画像を表示する目的で利用しますが、backgroundではコンテンツを重ねたり、位置調整や表示領域を調整するのに便利です。
backgroundプロパティ
background-image
background-imageは背景画像を指定するプロパティです。
background-image: url(画像パス);
background-repeat
background-repeatは、背景画像の繰り返しを指定するプロパティです。
background-repeat: 繰り返し設定;
| 設定値 | 説明 |
|---|---|
| repeat | 全面に繰り返し表示（デフォルト） |
| repeat-x | 横方向に繰り返し表示 |
| repeat-y | 縦方向に繰り返し表示 |
| no-repeat | 繰り返しなし |
background-size
background-sizeは、表示する画像サイズを指定します。
background-size: サイズ;
サイズの指定
サイズの指定は、%、em、pxなどの単位で指定します。
background-size: 50%;
background-size: 10em;
background-size: 100px;
background-size: auto;
| 設定値 | 説明 |
|---|---|
| contain | 縦横比をそのままでボックス内で最大表示 |
| cover | ボックス内で空間が出ないように最大サイズで表示 |
| auto | 画像の縦横比を維持（表示されない領域がある） |
contain
cover
auto
background-position
background-positionは、画像全体から表示する位置を設定するプロパティです。
background-position: 横位置 縦位置;
設定値
設定値は「指定文字」「%」「px」などで指定します。
| 設定値 | 説明 |
|---|---|
| left | 水平方向に左 |
| right | 水平方向に右 |
| center | 水平方向に中央、垂直方向に中央 |
| top | 垂直方向に上 |
| bottom | 垂直方向に下 |
背景画像の設定
画像の用意
背景画像は、以下のリンクからダウンロードしてください。
コンテンツ領域の作成
背景画像を表示するコンテンツ領域を、sectionやdivで作成します。
index.html
<main id="top">
<section id="banner">
<div class="background">
</div>
</section>
....
</main>
背景画像の表示
backgroundプロパティを使って、背景画像を設定します。
style.css
.background {
background-repeat: no-repeat;
background-position: bottom center;
background-color: #c0c0c0;
background-size: 100%;
background-size: cover;
background-color: #c0c0c0;
width: 100%;
height: 0;
padding-top: 30%;
}
#top .background {
background-image: url(../images/tokyo_station.jpg);
}
ソース
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>トップページ</title>
<link rel="stylesheet" href="./css/style.css">
</head>
<body>
<!-- ヘッダー -->
<header>
<nav>
<a href="./">Home</a>
<a href="./profile.html">Profile</a>
</nav>
</header>
<!-- メイン -->
<main id="top">
<section id="banner">
<div class="background">
</div>
</section>
<h1>トップページ</h1>
<section id="latest-posts">
<h2>最近の投稿</h2>
<ul>
<li><span class="date-label">2022/02/05</span>丸の内でショッピング<span class="new">New!</span></li>
<li><span class="date-label">2022/02/03</span>東京駅はレトロな空間</li>
<li><span class="date-label">2022/01/10</span>ぶらぶらと散歩でも</li>
<li><span class="date-label">2022/01/05</span>このチョコレート、メチャウマ！</li>
<li><span class="date-label">2022/01/03</span>多摩川河川敷でサッカー</li>
</ul>
</section>
</main>
<!-- フッター -->
<footer>
© Tokyo Blog
</footer>
</body>
</html>
style.css
body {
color: #303030;
font-family: 'Hiragino Kaku Gothic ProN', 'ヒラギノ角ゴ ProN W3', 'メイリオ', 'Meiryo', "Helvetica Neue", sans-serif;
line-height: 2rem;
}
a {
text-decoration: none;
color: #0084ff;
}
a:hover {
color: #ff7b00;
}
a.active {
/* border-bottom: 3px solid #336bee; */
}
h1 {
color: #a52a2a;
font-size: 1.5em;
margin: 10px 0;
padding: 20px;
text-align: center;
}
h2 {
margin: 5px 0;
padding: 10px 20px;
font-size: 1.2em;
color: #20325c;
border: 1px solid #20325c;
border-radius: 25px;
}
h2::before {
content: '♠︎';
margin-right: 8px;
}
#latest-posts ul {
list-style: none;
padding: 0;
}
#latest-posts {
margin: 20px 0;
}
.date-label {
background: #c63131;
color: #ffffff;
font-size: 0.5em;
margin-right: 10px;
padding: 5px 10px;
}
.new {
color: #c63131;
font-size: 0.7rem;
padding: 10px;
}
.background {
background-position: bottom;
background-size: cover;
padding-top: 30%;
}
#top .background {
background-image: url(../images/tokyo_station.jpg);
}
#profile .background {
background-image: url(../images/ez.jpg);
}
/* footer */
footer {
margin: 0;
padding: 20px;
background: rgb(62, 62, 62);
color: #ffffff;
text-align: right;
}
footer a {
color: #ffffff;
}
演習
問題１
プロフィール画像に背景画像を設定してみましょう。
画像の用意
背景画像は、以下のリンクからダウンロードしてください。