Q&A
「被らない様にする」とは、背景画像をスクロールさせた下に表示させる、という意味ですか？
背景なので、前景がかぶってくるのは当然のように思えるのですが、なにか読み違えてますか？
background-imageで指定した背景がheaderと被ってしまうのですが、被らない様にするにはどのようにコードを変えれば良いでしょうか。
HTML
1<!DOCTYPE html> 2<html lang="ja" dir="ltr"> 3 <head> 4 <meta charset="utf-8"> 5 <title>Coding Practice</title> 6 <link rel="stylesheet" href="./style.css"> 7 </head> 8 <body> 9 <header> 10 <div class="header-logo"> 11 <img class="header-logo" src="logo_transparent.png"> 12 </div> 13 <div class="header-list"> 14 <ul> 15 <li>Continue</li> 16 <li>My Challenge</li> 17 <li>Top</li> 18 </ul> 19 </div> 20 </header> 21 </body> 22</html> 23
CSS
1body { 2 font-family: "Helvetica Neue", 3 Arial, 4 "Hiragino Kaku Gothic ProN", 5 "Hiragino Sans", 6 Meiryo, 7 sans-serif; 8} 9body{ 10 margin: auto; 11 width: 980px; 12 background-image:url(./back-ground.png); 13 background-size:cover; 14 background-repeat: no-repeat; 15} 16 17.header-logo{ 18 float: left; 19 padding: 20px 0px; 20 width: 179px; 21 height: 40px; 22} 23li{ 24 list-style: none; 25 float: right; 26 padding: 31px 20px 30px 0px; 27 font-size: 16px; 28} 29```> 30
ご回答ありがとうございます。
アイキャッチから画像を表示したいという意味です。
アイキャッチとはなんですか？
https://www.infact1.co.jp/staff_blog/webmarketing/webdesign/802/
こちらのサイト情報ですがヘッダーの下にあたる場所のことです。
ご提示のコードには含まれていないようですが……
そのアイキャッチには手を加えずに、ということですか？
まだ質問が「受付中」になっていますが、「ベストアンサー」を選び「解決済」にされてはいかがでしょうか。
回答3件
0
単に<header>下に画像を置きたいのであれば
backgrand ではなく img で置けば良いのでは?
html
1 <header> 2 <div class="header-logo"> 3 <img class="header-logo" src="logo_transparent.png"> 4 </div> 5 <div class="header-list"> 6 <ul> 7 <li>Continue</li> 8 <li>My Challenge</li> 9 <li>Top</li> 10 </ul> 11 </div> 12 </header> 13 <img class="top_img" src="画像url" alt="">
css
1header { 2 overflow: hidden; 3} 4.top_img { 5 width: 100%; 6 height: auto; 7}
で行けると思いますが^^
投稿2020/07/02 13:05
総合スコア674
0
<header>の下にタグを入れてbackground指定したらヘッダー背景が空白のまま反映されました。
ご回答していただきありがとうございました。
投稿2020/07/03 00:44
総合スコア4
-millmill-さんのご回答そのままなので、低評価します。
0
投稿2020/07/02 05:26
総合スコア36074
あなたの回答
tips
プレビュー
