背景画像 CSS 表示

Question

コード
<div id = "box">
  <div class = "toppage">
    <div class = "toppage-content">今日のキミが明日のキミをつくる</div>
    <div class = "square_btn"><%= link_to "To do your tasks", tasks_path %></div>
  </div>
</div>


```ここに言語を入力
コード
#box {
  background-image: url("8a8320b3e63e28fa78a52562639c0cbb_m.jpg");
  background-size: cover;
  background-position: center;
}
  
.toppage {
  padding-top: 250px;
}

.toppage-content {
  text-align: center;
  font-size: 45px;
  font-weight: normal;
  font-style: italic;
}
.square_btn {
  text-align: center;
  text-decoration: none;
  font-weight: bold;
  font-size: 37px;
  color: #799dec;
  text-shadow: 0 4px 2px rgba(0, 0, 0, 0.32), 0px 1px 0px #6182ca, 0px 2px 0px #4f6aa7, 0px 3px 0px #5470ad;
}

.square_btn:active {
  top: 4px;
  text-shadow: none;
}

画像が半分しか表示されないのですが、原因わかる方いらっしゃいましたら教えてください

Comments

[Lhankor_Mhy]

コードをご提示ください。

[kei344]

teratailでは画像もアップできますので、ご自信で所持されている画像であればそちらを使用されてはいかがでしょうか。（画像として質問文に表示されますし）また、コードはスクリーンショットでなくコードブロックにテキストでお書きください。

[m.ts10806]

それぞれが何をしているか分かって導入されてますか？

[Lhankor_Mhy]

初心者の方かと思いますので、初心者アイコンをお使いください。

Answer 1

#boxにheightが指定されていませんから、高さ成り行きです。
成り行きの場合は、内容物によって決まりますから、単純に内容物が少なくて高さが小さくなり、背景画像が見切れている、ということです。

単純な解決方法はheightを指定することでしょうけれど、どのようなデザインにするかによって対処が異なるかと思います。

Comments

[退会済みユーザー]

ありがとうございました。解決しました！