Q&A
「背景画像」とは、KV.jpgのことでいいですか？
以下ご質問です。
１、ナビゲーションの下に背景画像を入れ込む際、「position: relative;」「position: absolute;」を
それぞれどの要素に入れれば良いのか分かりません。
色々試しましたが、画像が小さくなってしまったりナビゲーションの上に背景画像が来てしまいます。
ご存じの方がいらっしゃれば、ご教示いただけますと幸いです。
宜しくお願いいたします。
html
1<body> 2 <header> 3 <div class="container1"> 4 <div class="area_logo_header"> 5 <a href="#"> 6 <img class="logo" src="img/logo.png" alt="TOUMAI"></a> 7 </div><!--area_logo_header--> 8 <nav class="nav_header"> 9 <ul class="list_nav_header"> 10 <li><a href="#">CONCEPT</a></li> 11 <li><a href="#">SERVICE</a></li> 12 <li><a href="#">NEWS＆COLUMN</a></li> 13 <li><a href="#">F＆Q</a></li> 14 <li><a href="#">CONTACT</a></li> 15 </ul> 16 </nav> 17 <nav class="nav_header2"> 18 <ul class="sns_icon_header"> 19 <li class="sns_icon"><a href="#"> 20 <img class="Instagram" src="img/Instagram_icon.png" alt="Instagram"></a></li> 21 <li class="sns_icon"><a href="#"> 22 <img class="Twitter" src="img/Twitter_icon.png" alt="Twitter"></a></li> 23 <li class="sns_icon"><a href="#"> 24 <img class="facebook" src="img/facebook_icon.png" alt="facebook"></a></li> 25 </ul> 26 </nav> 27 </div><!--/.container1--> 28 </header> 29 <div class="container2"> 30 <div class="kv_wrap"> 31 <div class=top_view_sub_ttl> 32 <p class="sub_ttl_txt"> 33 誰かに作られた 34 <br>「在り方」「作り方」を抜け出そう 35 </p> 36 </div> 37 <div class="top_view_img"> 38 <div class="top_view_ttl"> 39 <p class="ttl_01">自分らしく、<br>生きるために</p> 40 </div><!--top_view_ttl--> 41 </div><!--top_view_img--> 42 </div><!--/.kv_wrap--> 43 </div><!--/.container2--> 44 45 </main> 46 <section class="about-us"> 47 <div class="service-menu_wrap"> 48 <p class="sevice_menu_top_en">service</p> 49 <div class="service_menu_top"> 50 <div class="menu_ttl"> 51 <h2 class="menu_ttl_01">法人向け<br>コンサルティング</h2> 52 </div><!--menu_ttl--> 53 <div class="inner-txt_wrap"> 54 <p class="txt_01"> 55 概要テキスト概要テキスト概要テキスト概要テキスト概要テキスト概要テキスト概要</p> 56 </div> 57 <!--service_menu_top--> 58 <div class="service_01_wrap"> 59 <a href="#"> 60 <img class="service_0101" src="img/service_0101.jpg" alt="事業構築"></a> 61 <a href="#"> 62 <img class="service_0202" src="img/service_0202.jpg" alt="副業構築"></a> 63 </div> 64 </div><!--service-menu_wrap--> 65</section> 66</body> 67</html>
css
1body{ 2 font-family: 'Noto Sans JP', sans-serif; 3} 4 5a { 6 color: #000; 7 text-decoration: none; 8 9} 10.container1{ 11 max-width: 1650px; 12 margin: 0 auto; 13 padding: 0 40px; 14 position: relative; 15} 16/* ヘッダー */ 17header{ 18 width: 100%; 19 top: 0; 20 left: 0px; 21} 22header > .container1{ 23 height: 100px; 24 display: flex; 25 align-items: center; 26 max-width: none; 27} 28/* 会社ロゴ */ 29.area_logo_header .logo{ 30 width: 270px; 31 display: block; 32 align-items: left; 33} 34.area_logo_header img{ 35 height: 55px; 36 vertical-align: bottom; /*画像下の余白を無くす*/ 37 38} 39/* ヘッダーナビ */ 40.nav_header{ 41 margin: 0 0 0 auto; 42 43} 44.list_nav_header{ 45 display: flex; 46 align-items: center; 47 margin: 0 -15px; 48} 49.list_nav_header > li{ 50 padding: 0 30px; 51} 52/* SNSアイコン ヘッダー */ 53.sns_icon_header{ 54 display: flex; 55 align-items: right; 56 margin: 30px; 57} 58.sns_icon_header > ul{ 59 list-style: none; 60} 61.sns_icon_header > li{ 62 padding: 0 5px; 63} 64 65/* トップ画像 */ 66.container2{ 67 background-color: #F1F1F1; 68 width: 100%; 69 70} 71.kv_wrap{ 72 max-width: 100%; 73 height: 800px; 74 display: flex; 75} 76.top_view_img{ 77 background: url(../img/KV.jpg) no-repeat; 78 width: 100%; 79 height: 500px; 80 background-position: left; 81 background-size: cover; 82 height: 735px; 83 margin-left: 110px; 84} 85/* メインタイトル */ 86.top_view_ttl .ttl_01{ 87 position: absolute; 88 color: white; 89 font-family: "游明朝"; 90 font-weight: 700; 91 font-size: 120px; 92 margin: 450px 60px; 93 94} 95/* 「誰かに作られた在り方作り方を抜け出そう」 */ 96.top_view_sub_ttl{ 97 width: 60px; 98 99} 100.sub_ttl_txt{ 101 writing-mode: vertical-rl; 102 font-family: "游明朝"; 103 font-weight: 600; 104 font-size: 30px; 105 106} 107/* サービスメニュー 一覧 */ 108.about-us{ 109 background-color: #F1F1F1; 110 width: 100%; 111} 112.service-menu_wrap{ 113 max-width: 80%; 114 margin: 0 auto; 115 height: 700px; 116 background-color: white; 117 display: flex; 118 position: relative; 119} 120/* ━━━━service */ 121.service_menu_top_en p{ 122 width: 100px; 123 display: flex; 124 float: right; 125} 126.service_menu_top_en{ 127 margin-left: auto; 128} 129.service_menu_top{ 130 width: 160px; 131} 132/* タイトル詳細設定 */ 133.menu_ttl{ 134 padding-top: 60px; 135 border-bottom: solid 4px #000; 136 padding-bottom: 40px; 137 margin-bottom: 32px; 138 margin-left: 40px; 139 text-align: -webkit-center; 140} 141/* 法人向けコンサルティング */ 142.menu_ttl_01{ 143 font-size: 40px; 144 writing-mode: vertical-rl; 145 text-align: -webkit-left; 146} 147.inner-txt_wrap{ 148 width: 150px; 149 height: 250px; 150 padding-bottom: 40px; 151 text-align: -webkit-right; 152} 153.inner-txt_wrap > .txt_01{ 154 writing-mode: vertical-rl; 155} 156.service_01_wrap{ 157 margin: 0 auto; 158 flex-wrap: wrap; 159 justify-content: space-between; 160 margin-top: 60px; 161} 162.service_01_wrap img{ 163 width: 400px; 164 margin: 20px; 165} 166
回答1件
0
ベストアンサー
こんにちは。
「背景画像」が、KV.jpgのことだという前提で回答します。
以下の通りでいいかと思います。
css
1header{ 2 position: absolute; 3}
なお、「誰かに作られた在り方作り方を抜け出そう」がヘッダーにかぶってくると思いますので、適宜修正してください。
投稿2020/12/22 04:31
総合スコア36946
この度はお忙しい中がご回答いただきまして、有難うございます！
あれほど苦しんでいたのに、headerにabsolute;を記述すれば出来たんですね。
ようやく無事に反映されました。
本当に有難うございます。助かりました！！
また何かございましたら、宜しくお願いいたしますm(__)m
あなたの回答
tips
プレビュー
