このように背景画像が上にはみ出した様なデザインにしたいのですが、どの様にしたらこの様にできるでしょうか?
試したことは、.header__imageのbackground-sizeを縦に少し大きくして900pxに指定し、padding-bottom:72px;を指定したりしましたが、うまく表現できませんでした。
わかる方おりましたらご教授お願いいたします。
下記は現在のコードの状況とプレビュー画像です。
html
1<header class="wrapper"> 2 <div class="header__image"> 3 <div class="header__pc"> 4 <h1 class="header__logo"> 5 <a href="#"><img src="img/header.png" alt="144Labロゴ" /></a> 6 </h1> 7 <ul class="header__nav"> 8 <li class="header__list"> 9 <a href="#">ABOUT</a> 10 <a href="#"><span>企業情報</span></a> 11 </li> 12 <li class="header__list"> 13 <a href="#">NEWS</a> 14 <a href="#"><span>ニュース</span></a> 15 </li> 16 <li class="header__list"> 17 <a href="#">SEARVICE & PRODUCT</a> 18 <a href="#"><span>サービス&製品情報</span></a> 19 </li> 20 <li class="header__list contact"> 21 <a href="#">CONTACT</a> 22 <a href="#"><span>お問い合わせ</span></a> 23 </li> 24 </ul> 25 </div> 26 </div> 27 </header>
該当部分css
css
1body { 2 width: 1280px; 3 height: 832px; 4} 5 6.wrapper { 7 width:100%; 8 height: 793px; 9 background-color: #F2F3F7; 10} 11 12.header__image { 13 width: 980px; 14 height: 822px; 15 padding-top: 59px; 16 background-image: url("menta.svg"); 17 background-size: 980px 822px; 18 background-repeat: no-repeat; 19 margin: 0 auto; 20}
回答1件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2020/04/25 06:16
2020/04/25 06:25
2020/04/25 06:26
2020/04/25 07:02