HTMLでの半ページ背景画像の設定方法

HTMLの基本構造を作成します。

<!DOCTYPE html>
<html>
<head>
<title>半ページ背景画像</title>
<link rel="stylesheet" type="text/css" href="styles.css">
</head>
<body>
<div class="container">
<h1>タイトル</h1>
<p>記事の内容</p>
</div>
</body>
</html>

CSSで背景画像を設定します。以下の例では、styles.cssファイルを使用して背景画像を指定します。
```
.container {
background-image: url("background.jpg");
background-size: cover;
background-position: center;
height: 50vh;
}
```
上記の例では、.containerクラスに対してbackground-imageプロパティを使用して背景画像を指定しています。background-sizeプロパティは、画像を要素に合わせて自動的にサイズ変更するために使用されます。background-positionプロパティは、背景画像の位置を指定します。heightプロパティでは、要素の高さを指定して半ページのエリアを作成します。
背景画像のレスポンシブデザインを実現するために、メディアクエリを使用します。
```
@media (max-width: 768px) {
.container {
height: 100vh;
}
}
```
上記の例では、画面の幅が768px以下の場合に、.containerクラスの高さを100vhに変更しています。これにより、モバイルデバイスなどの小さな画面でも背景画像が完全に表示されます。

これで、HTMLで半ページの背景画像を設定する方法がわかりました。必要に応じて、背景画像のパスや要素のクラス名、メディアクエリの条件などを変更してカスタマイズすることができます。