背景画像の設定、全画面表示、ページの背面に設定する方法（HTML、CSS、JavaScript）

Question

私が作成したこの単純なゲームに背景画像を設定したいのですが、画像を入力画面の中央に配置し、ページの高さと幅をすべてカバーする方法がわかりません。また、画像を背景にしてゲームを画像の上に置き、画像を一番下のレイヤーにしたいと考えています。

リーリー リーリー リーリー

Answer 1

この問題を解決する 1 つの方法は次のとおりです:

ステップ 1: ゲーム用のコンテナを作成する

リーリー リーリー

ステップ 2: 背景画像を追加する

リーリー リーリー

上記の CSS は、画像の左上隅が画面の中央に来るようにコンテナをプッシュします。中央に配置したいので、幅に基づいて移動する必要があります:

リーリー

---

親コンテナには position:relative があるため、position:absolute を持つ要素を使用して、コンテナを基準にして要素を配置できます。

z-index CSS プロパティを変更して、要素に「深さ」を追加することもできます。

Answer 2

背景を画像タグにする必要がない場合、これはより簡単な方法です。

空のような div を追加し、その高さを (100% - #地面の高さ) に設定します。この div を追加すると、

スコア div が一番下まで押し込まれます。これを回避するには、position:absolute を使用して

を配置し、次に top: 0; を追加して左上隅に再配置します。

リーリー リーリー