background-imageを文字の後ろにしたい
文字の後ろに背景画像を配置するには、z-indexプロパティを使用して要素の配置順序を変更します。以下は、文字の後ろに背景画像を配置する簡単な例です。
html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Background Image Behind Text</title>
<style>
.container {
position: relative;
width: 300px; /* 任意の幅 */
height: 200px; /* 任意の高さ */
text-align: center;
color: white;
font-size: 24px;
}
.background-image {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-image: url('path/to/your/image.jpg'); /* 画像のパスを指定 */
background-size: cover;
z-index: -1; /* 背景画像を後ろに配置 */
}
</style>
</head>
<body>
<div class="container">
Your Text Here
<div class="background-image"></div>
</div>
</body>
</html>
この例では、.containerがテキストを含む要素であり、.background-imageが背景画像を表示するための要素です。.background-imageにz-index: -1;を設定して、背景画像を要素の後ろに配置しています。テキストは.container内にあり、背景画像の後ろに表示されます。背景画像のパスは実際の画像のパスに変更してください。