質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.35%
HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

Q&A

解決済

1回答

705閲覧

画面幅を狭くした時に背景画像を縦いっぱいにしたい

d-chi839

総合スコア2

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

0グッド

0クリップ

投稿2020/09/05 13:26

前提・実現したいこと

767px以下の時に、背景画像を縦いっぱいにしたいが、どの要素になんの宣言をしたらいいかわからず、目的の為には、どこの要素が邪魔をしていてどこに足りない要素があるのかわかりません。
イメージ説明

発生している問題・エラーメッセージ

背景画像が縦画面いっぱいにならない

該当のソースコード

HTML

1<!DOCTYPE html> 2<html lang="jp"> 3<head> 4 <meta charset="UTF-8"> 5 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 6 <title>Document</title> 7 <link rel="stylesheet" href="style.css"> 8</head> 9<body> 10 <header> 11 <div class="header"> 12 <div class="hd-left"> 13 <img class="hd-logo" src="img/isaralogo.png" alt=""> 14 <p class="hd-txt">バンコクのノマドエンジニア育成講座</p> 15 </div> 16 <a class="pc_only hd-info" href="#"><p class="hd-info__txt">お問い合わせ / 資料請求はこちら</p></a> 17 <a class="sp_only md-hd-info"> 18 <img class="md-hd-img" src="img/form.png" alt=""> 19 <p class="md-hd-info-txt">資料請求</p> 20 </a> 21 </div> 22 </header> 23 <section> 24 <div class="mv-ttl"> 25 <h3 class="mv-ttl__topTxt">プログラミングで<br>人生の安定を手に入れよう</h3> 26 <img class="mv-ttl__img" src="img/isaralogo.png" alt=""> 27 <p class="mv-ttl__txt">バンコクのノマドエンジニア育成講座<br>iSara[イサラ]</p> 28 </div> 29 </section> 30 <section> 31 <div class="info"> 32 <p class="info-ttl">まずは20日間で、<br>月10万円稼げるスキルを手に入れよう。</p> 33 34 <p class="info-txt">※受講料金は実質0円です。詳しくは資料請求をどうぞ。</p> 35 36 <a class="hd-info" href="#"><p class="hd-info__txt">お問い合わせ / 資料請求はこちら</p></a> 37 38 <ul class="info-ul"> 39 <li class="info-li"> 第4期生 : 2018年12月3日 ~ 2018年12月22日*締め切りました</li> 40 <li class="info-li"> 第5期生 : 2019年4月8日 ~ 2019年4月27日*締め切りました</li> 41 <li class="info-li"> 第6期生 : 資料請求受付中です</li> 42 </ul> 43 </div> 44 </section> 45 46 47</body> 48</html>

CSS

1html { 2 font-size: 10px; 3} 4body { 5 margin: 0; 6 padding: 0; 7} 8.header { 9 box-sizing: border-box; 10 display: flex; 11 justify-content: space-between; 12 position: fixed; 13 top: 0; 14 height: 90px; 15 width: 100%; 16 padding: 20px 2% 20px 1%; 17 background-color: #fff; 18} 19.hd-left { 20 display: flex; 21 align-items: flex-end; 22} 23.hd-logo { 24 height: 50px; 25 width: 125px; 26} 27.hd-txt { 28 font-weight: 700; 29 font-size: 1vw; 30 margin-left: 10px; 31} 32.hd-info { 33 display: block; 34 background-color: rgb(219,107,101); 35 border-radius: 25px; 36 padding: 10px 10px 0; 37 font-size: 1.6rem; 38 text-decoration: none; 39 color: #fff; 40 margin-bottom: 5px; 41} 42.hd-info__txt { 43 margin: 0; 44} 45.mv-ttl { 46 margin-top: -20px; 47 background-image: url(img/mainsp.jpg); 48 background-size: cover; 49 height: 300px; 50 text-align: center; 51 padding: 200px 0 100px; 52} 53.mv-ttl__topTxt { 54 font-size: 3rem; 55 line-height: 60px; 56 font-weight: 700; 57} 58.mv-ttl__img { 59 width: 300px; 60} 61.mv-ttl__txt { 62 font-size: 2rem; 63 font-weight: 700; 64 margin-top: 30px; 65} 66 67.sp_only { 68 display: none; 69} 70@media(max-width:767px) { 71 html { 72 font-size: 8px; 73 } 74 .pc_only { 75 display: none; 76 } 77 .sp_only { 78 display: block; 79 } 80 .header { 81 height: auto; 82 padding: 0; 83 } 84 .hd-left { 85 margin: 10px 0 0 2%; 86 flex-direction: column-reverse; 87 align-items: flex-start; 88 } 89 .hd-txt { 90 font-weight: 400; 91 margin: 10px 0; 92 } 93 .hd-logo { 94 width: 95px; 95 height: auto; 96 margin-bottom: 6px; 97 } 98 .md-hd-info { 99 background-color: rgb(219,107,101); 100 display: flex; 101 flex-direction: column; 102 width: 66px; 103 text-align: center; 104 } 105 .md-hd-img { 106 width: 25px; 107 margin: 0 auto; 108 margin-top: 9px; 109 } 110 .md-hd-info>p { 111 font-size: 11.5px; 112 color: #fff; 113 margin: 0 auto; 114 margin-top: -2px; 115 } 116 .mv-ttl { 117 118 } 119 .mv-ttl__topTxt { 120 position: absolute; 121 top: 20%; 122 left: 20%; 123 text-align: center; 124 font-weight: 700; 125 font-size: 5vw; 126 } 127 .mv-ttl__img { 128 position: absolute; 129 top: 38%; 130 left: 10%; 131 width: 82%; 132 } 133 .mv-ttl__txt { 134 position: absolute; 135 bottom: 20%; 136 left: 14%; 137 font-size: 4vw; 138 text-align: center; 139 font-weight: 400; 140 } 141}

試したこと

mv-ttlのpaddingを0、heightを1frにしてダメでした。
またmv-ttlのpaddingを0にして、mv-ttlをdivで囲いdivにbg-imgを宣言しheightを1frにしたが、画像自体が現れず、767px以上のスタイリングも崩れてしまいました。

補足情報(FW/ツールのバージョンなど)

ここにより詳細な情報を記載してください。

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

Lhankor_Mhy

2020/09/08 08:04

「背景画像を縦いっぱい」とはどういう状況でしょうか? スクロールを下スクリーンの下まで背景画像を入れたい、ということですか?
d-chi839

2020/09/14 10:46

いいえ、ディスプレイいっぱいに設定したかったのですが、背景ではなくimgとしてHTMLに書いたところ思い通りに出来ました。反応して頂いて有難うございます!
guest

回答1

0

自己解決

CSSにbackground-imgとしていたところをHTMLにimg
タグで記述したところ解決。画面幅が広くなったら、背景画像に切り替わる様に書かれていました

投稿2020/09/14 10:49

d-chi839

総合スコア2

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.35%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問