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

はじめまして。こんにちは。
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%;
}

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

回答2件

If you are using an internal CSS than your code would be

header{

background-image: url("images/paper.gif");

}

But if you are using external CSS file in website than the path will be change to step out from CSS file

header{

background-image: url("../images/paper.gif");

}
I find this code on somewhere duck life

投稿2023/03/23 07:54

londondonna

総合スコア2

ベストアンサー

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

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

css
1body {padding-top: 80px;}

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

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

css
1header {
2  position: sticky;
3  top: 0;
4}

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

投稿2023/03/23 05:46

hatena19

総合スコア32653

回答へのコメント

hinaaa

2023/03/23 10:48

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

hatena19

2023/03/23 23:42

padding-top の方法、margin-topの方法、position: sticky　の方法の３つのうち、どの方法を採用したのでしょうか。現象が再現できるコードを提示してください。質問は修正できますので、質問に追記してください。コードはマークダウンのコードブロック内にいれてください。下記リンク参照 https://teratail.com/help/question-tips#questionTips37

あなたの回答