headerの下に背景画像を表示するようにしたい

Question

はじめまして。こんにちは。
header部分の下から背景画像を表示するようにしたいが、headerと重なる？ように背景画像が設定されていまうので解決方法を教えていただきたいです。
該当箇所のHTMLソースコードは以下の通りです。なぜかソースコードがうまく改行されないのでとても見にくい状態になっています。大変申し訳ございません

<header> <h1 class="title">Fashion City</h1> <nav><%= link_to "新規投稿へ", new_post_path %></nav> <nav><%= link_to "ログアウト", destroy_user_session_path, method: :delete %></nav> </header> <div class="posts-container"></div> <link rel="stylesheet" href="./stylesheets/application.css">

該当箇所のCSSソースコードは以下の通りです。
header{
background-color: #dd4d15;
position: fixed;
height: 80px;
width: 100%;
display: flex;
flex-direction: row;
justify-content: flex-end;
align-items: center;
}

nav {
margin-right: 5%;
}

.posts-container{
background-image: url("IMG-103.jpg");
height: 100vh;
background-repeat: no-repeat;
background-size: cover;
width: 100%;
}

プログラミング初心者なので構成がおかしかったりなどあると思いますが、その点もご指摘していただけると幸いです。よろしくお願いします。

Answer 1

position: fixed; を設定した要素は通常フローからは外れ、浮いた状態になるので、あとの要素は背面に潜り込みます。

対策としては、bodyにheaderの高さ分のpadding-topを付けるか、次の要素にmargin-topを付けるかします。

body {padding-top: 80px;}

.posts-container {margin-top: 80px;}

あるいは、position: fixed; ではなくposition: sticky; で固定するという方法もあります。

header {
  position: sticky;
  top: 0;
}

HTMLの構造によって適切な方法を選択してください。

Comments

[hinaaa]

回答ありがとうございます。
上記の方法で試してみたのですが、header部分と背景画像部分が離れて表示されるようになりました。headerと背景画像の間に空白ができないようにする方法はありますでしょうか。

[hatena19]

padding-top の方法、margin-topの方法、position: sticky　の方法の３つのうち、どの方法を採用したのでしょうか。
現象が再現できるコードを提示してください。
質問は修正できますので、質問に追記してください。

コードはマークダウンのコードブロック内にいれてください。下記リンク参照
https://teratail.com/help/question-tips#questionTips37