ヘッダー部分を作成したいのですが画像の上に表示されず要素が隠れてしまうので画像の上に表示させたい。

前提・実現したいこと

画像の中の上部にヘッダー部分を作りたく試行錯誤しているのですが
ヘッダーを作っても反映されません。
当方初心者の為、状況がわかりません。
どなたかご教授していただければ幸いです。

発生している問題・エラーメッセージ

反映されない

エラーメッセージ

該当のソースコード

【HTML】

<!DOCTYPE html>

<html lang="ja">

    ```<meta charset="UTF-8">```
    ```<meta name="viewport" content="width=device-width, initial-scale=1.0">```
    ```<link rel="stylesheet" href="css/style.css">```
    ```<title>Document</title>```
</head>```
```<body>
   ``` <div class="background-container">
    ```<div class="stars"></div>```
    ```<div class="twinkling"></div>```
    ```<div class="clouds"></div>```
    </div>```
</body>```
</html>```
【CSS】
```from {
  -webkit-transform: translate3d(0px, 0px, 0px);}```
```to {
  -webkit-transform: translate3d(1000px, 0px, 0px);}```
```@-webkit-keyframes move-background {
```from {
  -webkit-transform: translate3d(0px, 0px, 0px);}```
```to {
  -webkit-transform: translate3d(1000px, 0px, 0px);}```
}```
```@-moz-keyframes move-background {
```from {
  -webkit-transform: translate3d(0px, 0px, 0px);}```
```to {
  -webkit-transform: translate3d(1000px, 0px, 0px);}```
}```
```@-webkit-keyframes move-background {
```from {
  -webkit-transform: translate3d(0px, 0px, 0px);}```
```to {
  -webkit-transform: translate3d(1000px, 0px, 0px);}```
}```
```.background-container {
```position: fixed;```
```top: 0;```
```left: 0;```
```bottom: 0;```
```right: 0;```
```height: 500px;```
}```

.stars {
background: black url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/1231630/stars.png) repeat;
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
display: block;
z-index: 0;
}

```.twinkling {
```width: 10000px;```
```height: 100%;```
```background: transparent url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/1231630/twinkling.png") repeat;```
```background-size: 1000px 1000px;```
```position: absolute;```
```right: 0;```
```top: 0;```
```bottom: 0;```
```z-index: 2;```
```-moz-animation: move-background 70s linear infinite;```
```-ms-animation: move-background 70s linear infinite;```
```-o-animation: move-background 70s linear infinite;```
```-webkit-animation: move-background 70s linear infinite;```
```animation: move-background 70s linear infinite;```
}```

```.clouds {
```width: 10000px;```
```height: 100%;```
```background: transparent url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/1231630/clouds_repeat.png") repeat;```
```background-size: 1000px 1000px;```
```position: absolute;```
```right: 0;```
```top: 0;```
```bottom: 0;```
```z-index: 3;```
```-moz-animation: move-background 150s linear infinite;```
```-ms-animation: move-background 150s linear infinite;```
```-o-animation: move-background 150s linear infinite;```
```-webkit-animation: move-background 150s linear infinite;```
```animation: move-background 150s linear infinite;```
}```

```img {
```height: 70vh;```
```width: 70vh;```
```position: absolute;```
```z-index: 3;```
```right: 20px;```
}```
```ここに言語名を入力
ソースコード

試したこと

z-indexやpositionを入れてもダメでした。
ここに問題に対して試したことを記載してください。

補足情報（FW/ツールのバージョンなど）

ここにより詳細な情報を記載してください。

kei344

2020/04/08 16:23

（質問文は編集できます）質問文のコードはそれぞれコードブロックで囲んでいただけませんか？ ```（バッククオート3つ）で囲み、前後に改行をいれるか、コードを選択して「<code>」ボタンを押すとコードブロックになります。また、「うまくできない」とは「何をしたときに」「どうなると思って」「どうなったのか」を、具体的に記述されたほうが回答を得られやすいと思います。

kei344

2020/04/08 17:01

コードブロックはCSS/HTML単位で囲ってください。PCであれば質問記入エリアの右部分あたりにリアルタイムに結果が表示されていると思うので、そこを見ながら調整してください。

行動規範の内容に同意します

回答1件

HTMLの中に、<img>がありません。
そのため以下の記述は意味を持ちません。

CSS
1img {
2  height: 70vh;
3  width: 70vh;
4  position: absolute;
5  z-index: 3;
6  right: 20px;
7}

画像の中の上部にヘッダー部分を作りたく試行錯誤しているのですが
ヘッダーを作っても反映されません。

<div class="header"></div>や<header></header>などヘッダー的な名前の要素が見当たりません。

当てずっぽうで、やりたいことを推測し、ソースコードを書いています。

HTML
1<!DOCTYPE html>
2<html lang="ja">
3<head>
4  <meta charset="UTF-8">
5  <meta name="viewport" content="width=device-width, initial-scale=1.0">
6  <link rel="stylesheet" href="css/style.css">
7  <title>Document</title>
8</head>
9<body>
10  <div class="background-container"><!-- 「画像」といっているのはこの要素と解釈 -->
11    <header>ヘッダー</header><!-- ヘッダーを表示したいとのことなのでHTML要素を追加 -->
12    <div class="stars"></div>
13    <div class="twinkling"></div>
14    <div class="clouds"></div>
15  </div>    
16</body>
17</html>

CSSは、以下を追加してみてください。赤背景のヘッダーが画面内に出てくると思います。

CSS
1header {
2  background: #f00;
3  position: fixed;
4  top: 0;
5  left: 0;
6  right: 0;
7  z-index: 100000;
8}

投稿2020/04/08 16:33

new1ro

総合スコア4528

あなたの回答

tips

プレビュー

行動規範の内容に同意します

質問の解決につながる回答をしましょう。サンプルコードなど、より具体的な説明があると質問者の理解の助けになります。また、読む側のことを考えた、分かりやすい文章を心がけましょう。

まだベストアンサーが選ばれていません

会員登録して回答してみよう

アカウントをお持ちの方は

15分調べてもわからないことは
teratailで質問しよう！

ただいまの回答率
85.35%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう！