Q&A
何がどう上手くいかないのか説明してほしいです！
e022732a3b5f4b9bc6f4043f0062d81.png)
リンク内容のサイト模写をしているのですが、ヘッダー部分のお花の画像が手本のように添付できません。
Google Chromeのデベロッパーツールを用いて、お手本のコードと見比べながら試行錯誤してみたのですが、うまくいきませんでした。
宜しくお願い致します。
lang
1<!doctype html> 2<html> 3<head> 4 <meta charset="UTF-8"> 5 <link rel= "stylesheet" href="flower.css"> 6 <title>FLOWER | かわいいが届く、ずっと無料のお花便</title> 7</head> 8 9<body> 10 <section class = "header"> 11 <div class = "logo"></div> 12 <div class = "tagline">かわいいが届く、ずっと無料の</div> 13 <div class = "download_buttan"></div> 14 <div class = "footnote"> 15 <p>*配送料360円（税抜）が別途かかります</p> 16 <p>*北海道、沖縄、離島エリアは現在対象外です</p> 17 </div> 18 </section> 19 20 <section class = "service"> 21 <div class = "service1"> 22 <h2>届くのは<br>あなた好みのお花だけ</h2> 23 <p>FLOWERのお花は季節やトレンドに合わせ<br>てプロがセレクトしたもの。雰囲気の異な<br>る2種類のお花から毎回好きなものが選べます。</p> 24 </div> 25 <div class = "service2"> 26 <h2>お花はポストに投函<br>忙しくても大丈夫</h2> 27 <p>お花は専用BOXに入れてポストに直接お届<br>け。不在で受け取れなくても安心して使え<br>ます。</p> 28 </div> 29 <div class = "service3"> 30 <h2>FLOWERなら<br>いつもかわいく飾れる</h2> 31 <p>専用の花器を使うと、届いたお花をさっと<br>生けるだけでかわいい空間のできあがり。<br>お花のある暮らしがもっと楽しくなります。</p> 32 </div> 33 </section> 34 35 <section class="plan"> 36 <section class="plan1"></section> 37 <section class="plan2"></section> 38 </section> 39 40 <footer> 41 42 </footer> 43</body> 44</html>
lang
1.header { 2 3 4 background-size: cover; 5 background-position: center; 6 height: 100vh; 7 min-height: 660px; 8 text-align: center; 9 position: relative; 10 padding-top: 48px; 11 background: url(https://s3-ap-northeast-1.amazonaws.com/flower-production-assets/assets/web/home/bg_header_pink-4704d42ed44908fb061e80afc515a93ab2fcbfd605c2580de486a4d980b2115a.jpg); 12 13} 14 15.logo{ 16 margin-top: 5vh; 17 margin-right: auto; 18 margin-bottom: 16px; 19 margin-left: auto; 20 background:url("Flower/download.png"); 21 width:131px; 22 height:116px; 23 background-size: contain; 24 background-repeat: no-repeat; 25 background-position: center; 26 27}
ありがとうございます。
ヘッダーの背景画像がお手本ように、お花が真ん中にいきません
ソースコードの方を画像ではなく、テキストとして貼ってくれると調べやすいのですができますでしょうか？
コードはマークダウンのcode機能を利用してご提示ください
https://teratail.com/help#about-markdown
追加しました。
背景画像を追加するコードを一番下から一番上に追加すると解決できました。
セレクタの場所によって挙動が変わるのでしょうか？
ご指摘ありがとうございます
回答1件
0
ベストアンサー
background: url(～)のコードをbackground-size・background-positionより前に持ってきて下さい。
backgroundプロパティに限らずCSSの性質の話なのですが、上から順番にコードが読み込まれていくので、背景画像が設定されていない時点で宣言されたbackground-sizeやbackground-positionは無効となります。
そのため質問文に載せられているコードは、実質上記の2つを宣言していないコードと同じという事になります。
例えば、以下のようなコードでもflex-directionは無効になり要素は縦には並びません。
html
1<ul> 2 <li>item1</li> 3 <li>item2</li> 4 <li>item3</li> 5</ul>
css
1ul { 2 flex-direction: column; 3 display: flex; 4}
投稿2019/10/30 15:35
総合スコア360
あなたの回答
tips
プレビュー
