Q&A
>1枚の背景画像を途切れることなく
>思い通りの表示方法
文章では今ひとつわかりません。
完成図を図示してください。
>検索もかけましたが、
「検索した」という行為ではなく、「キーワード」「確認した記事」「試したこと」等、エビデンスを提示してください。
前提・実現したいこと
トップページを作成しています。
<body>タグの中の<header>とその直下の<section id="top">で1枚の背景画像を途切れることなく表示させたいです。  この画像の上部のように、headerメニューとtopのメッセージ部分の背景を表示したいです。発生している問題・エラーメッセージ
<header>または<section id="top">どちらかでの表示設定しか出来ません。該当のソースコード
HTML
1<body> 2 <header> 3 <div class="container"> 4 <div class="header-menu"> 5 <h1 class="header-left">***</h1> 6 <div class="header-right"> 7 <ul class="header-nav"> 8 <li class="nav-item">Top</li> 9 <li class="nav-item">About</li> 10 <li class="nav-item">Portfolio</li> 11 <li class="nav-item">Contact</li> 12 </ul> 13 </div> 14 </div> 15 </div> 16 </header> 17 18 <section id="top"> 19 <div class="container"> 20 <h2 class="top-msg">***</h2> 21 <lead class="sub-msg">***</lead> 22 </div> 23 </section> 24
CSS
1header { 2 background-image: url(/img/top.jpg); 3 background-size: cover; 4 padding: 20px; 5}
試したこと
<header>や<section id="top">、<body>で背景設定をしましたが、思い通りの表示方法になりません。 「2つの親要素に背景画像を設定する」「header 背景画像」などと検索しましたが、該当のものを見つけられませんでした。補足情報（FW/ツールのバージョンなど）
回答1件
0
ベストアンサー
<body>タグの中の<header>とその直下の<section id="top">で1枚の背景画像を途切れることなく表示させたいです。
単純に、<header>と<section id="top">をdivタグで囲んで、それに背景画像を設定すればいいと思いますが、それではダメですか。HTMLを変更できないという制限でもあるのんですかね。
あるいは、body に背景画像を設定して、background-position: center top としてはどうですか。
投稿2021/02/18 00:33
編集2021/02/18 00:36
総合スコア33790
hatena19様
ご回答ありがとうございます。
初歩的なことが頭から抜けておりました。
divタグで囲み、背景画像を設定しようと思います。
お忙しい中、お時間頂きありがとうございました。
あなたの回答
tips
プレビュー
