一番したのカレンダークラスを空にしてそこにい背景画像を入れたいのですが背景画像が表示されません
やってみたこと
divの数の確認
模写しているのでディベロッパーツールで確認してみた
一時間ほど考えてもやはりダメでした
<!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <link rel="stylesheet" href="mosh1.css"> <title>mosha1-flower</title> </head> <body> <header> <div class="logo"></div> <div class="tagline"> かわいいが届くお花便 </div> <div class="download-wrapper"> <div class="download-item"> <div class="container"> <a class="download for-ios" href="https://flowr.page.link/88Lt">App Store</a> <a class="download for-andoroid" href="https://flowr.page.link/19mT">Google Play</a> <p>* 北海道、沖縄、離島エリアは現在対象外です</p> </div> </div> </div> </header> <section class="service"> <div class="service2"> <div class="item item1"> <h2>届くのは<br>あなたの好みのお花だけ</h2> <p> FLOWERのお花は季節やトレンドに合わせてプロがセレクトしたもの。雰囲気の異なる複数のお花から毎回好きなものが選べます。 </p> </div> <div class="item item2"> <h2>お花はポストに投函<br>忙しくても大丈夫</h2> <p> お花は専用BOXに入れてポストに直接お届け。不在で受け取れなくても安心して使えます。 </p> </div> <div class="item item3"> <h2>FLOWERなら<br>いつもかわいく飾れる</h2> <p> 専用の花器を使うと、届いたお花をさっと生けるだけでかわいい空間のできあがり。お花のある暮らしがもっと楽しくなります。 </p> </div> </div> </section> <section class="price"> <div class="container"> <div class="item-contents"> <div class="heading"> <h2>お部屋に飾りやすいサイズの<br>ブーケをワンコインで</h2> </div> <div class="freetrial"> <img class="free-image" src="https://s3-ap-northeast-1.amazonaws.com/flower-production-assets/assets/web/home/price_freetrial-f9eff918f8de1901e1e25d84228cb3ab5eb126f5c2469cfc03ea46b507f29e49.png"> </div> <div class="price-image"> <img class="image" src="https://s3-ap-northeast-1.amazonaws.com/flower-production-assets/assets/web/home/price_bouquetimg-9d58e59120ae586337c3b91a2f531ad14e7b05dc3d3ec63ab0ee68b41c8852fb.png"> <p>お花とグリーン5本〜6本のブーケ</p> <p class="large">500円<span>/1回</span></p> </div> <div class="footnote"> <p>送料は360円です</p> <p>価格は税別です</p> </div> </div> </div> <div class="item-frequency"> <h2>月に2回の注文で、<br>お花がいつもあるちょうどいいペース</h2> <div class="calendar"> </div> </div> </section> </body> </html>
header { background-image:url(https://s3-ap-northeast-1.amazonaws.com/flower-production-assets/assets/web/home/bg_header_pink-4704d42ed44908fb061e80afc515a93ab2fcbfd605c2580de486a4d980b2115a.jpg); height:100vh; background-size: cover; padding-top: 48px; background-position: center; position: relative; } p { margin:0; } .body { font-size:14px; } .logo { background-image: url(https://s3-ap-northeast-1.amazonaws.com/flower-production-assets/assets/web/home/header_logo-0dbc9cb7c037472d3bf71fde0c1d3efd708c2c2547e9ed3e420051ca826cdad8.png); margin: 0 auto 16px; width: 131px; height: 116px; background-repeat: no-repeat; background-size:contain; background-position: center; margin-top:5vh; } .tagline { color:white; text-align: center; } .download-wrapper { padding-top:24px; margin: 0 auto; text-align: center; position: absolute; bottom:24px; left:0px; right: 0px; } .download-item { padding:24px 16px; } .download { display: inline; background-color: black; border-radius: 3px; padding: 20px 29px; color:white } .download.for-ios { margin-right: 10px; } .download-wrapper p { color:white; padding-top:100px; } body, h2, h3, h4, p { font-family: "Noto Sans JP", sans-serif; line-height: 1.6; letter-spacing: 0.05rem; } .service2{ display: flex; } .item { color: white; width:calc(100%/3); } .item1 { background-image:url(https://s3-ap-northeast-1.amazonaws.com/flower-production-assets/assets/web/home/bg_service01-01ee576583ddad054106d9f2dc78caf78be6c829383351a4fbc99ac5a566020a.jpg); background-size:cover; padding: 8vmin 6vmin; background-position:center bottom; min-height: 540px; line-height: 1.6; } .item2 { background-image:url(https://s3-ap-northeast-1.amazonaws.com/flower-production-assets/assets/web/home/bg_service02-cd59d8cd17b05503a9fc3eeae42d618d0cc19b2277b581f5db275d5dde09e94d.jpg); padding:8vmin 6vmin; background-position: center bottom; background-size:cover; min-height: 540px; } .item3 { background-image:url("https://s3-ap-northeast-1.amazonaws.com/flower-production-assets/assets/web/home/bg_service03-4c44f872ed6f7ed3007faeb109b1e03ceabcdb3106ba54392a5457a159a0f2ab.jpg"); padding:8vmin 6vmin; min-height:540px; background-size:cover; background-position:center bottom; } .price { text-align: center; min-height:578px; padding:16vmin 6vmin 20vmin; background: #f5f5f5; } .heading { position: relative; } .free-image { width:125px; height:46px; top:80px; right: 90px; } .price-image { margin-bottom:16px; } .freetrial { position: absolute; top:80px; right:600px; } .image { width:200px; height:200px; text-align: center; } .item-frequency { padding: 16vmin 0 20vmin; } .calender { background-image:url(https://s3-ap-northeast-1.amazonaws.com/flower-production-assets/assets/web/home/img_frequency-e1cc7b2fcecb9a18105144861c456538abb21a5049fe1d320846cb61e42d1fdd.png); margin:24px; background-position:center; background-size:contain; height:156px; }
回答1件
あなたの回答
tips
プレビュー