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

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

ただいまの
回答率

90.50%

  • HTML5

    5121questions

    HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

  • CSS3

    2623questions

    CSS(Cascading Style Sheet)の第3版です。CSS3と略されることが多いです。色やデザインを柔軟に変更することが可能になります。

  • CSSフレームワーク

    189questions

    CSSフレームワークは、Webページのスタイルを指定する言語であるCSSを容易に構築するためのツールです。ツイッター社が開発した「Bootstrap」や段組レイアウトが可能な「Foundation」など様々なCSSフレームワークがあります。

Skeltonでトップのキャッチ画像を画面いっぱいにひょうじするには?

解決済

回答 2

投稿

  • 評価
  • クリップ 0
  • VIEW 898

Skeletonを使用してランディングぺージを作成しています。
トップのキャッチ画像部分で、元画像を画面いっぱいに表示したいのですが、サイズがうまく合いません。

background-size:cover;
ではだめなのでしょうか。

変えたい部分

section heroの img "phone"

やったこと

coverしたり
width,height100%にしたりした

上記試しましたがサイズ、下と右の方が切れていて、うまくあっていません。

ウィンドウサイズを横750以下にすると、縦はちょうどいい感じに表示されているようです。

原因わかる方お教え頂けますと幸いです。

.hero {
  background-image: url('../images/top_catch.png');
  background-repeat: no-repeat;
  background-size: cover;
  display: block;
  width: 100%;
  height: 100%;
  color: #25C7AD;
}

参考

・・・
  <div class="section hero">
    <div class="container">
        <div class="one-half column phone">
          <img class="phone" src="images/iphone.png">
        </div>
        <div class ="right-contents">
          <div class="one-half column">
            <h1 class="hero-heading">ヘッドコピー</h1>
          </div>
          <div class="three columns left-message">
            <h6 class="hero-subcopy">テキストテキスト</h1>
            <a class="button button-primary"  href="#">利用はこちらから</a>
          </div>
          <div class="three columns right-message">
            <h4 class="hero-subcopy">サブコピー的なもの</h1>
            <img class="qr" src="images/qr_sample.png">
          </div>
        </div>
    </div>
  </div>
・・・
/* NOTE
ベースが10pxなので1.5rem =15px) */

/* Shared
–––––––––––––––––––––––––––––––––––––––––––––––––– */
.button {
  border-radius: 100px;
}
/* Sections
–––––––––––––––––––––––––––––––––––––––––––––––––– */
.section {
  text-align: center;
  height: 70vh;
}
.section.hero {
 box-sizing: border-box;
  height:60vh
}
/* Hero
–––––––––––––––––––––––––––––––––––––––––––––––––– */

.hero {
  background-image: url('../images/top_catch.png');
  background-repeat: no-repeat;
  background-size: cover;
  display: block;
  width: 100%;
  height: 100%;
  color: #25C7AD;
}

.hero.hero-subcopy {
  top:10rem;
}

.hero.hero-heading {
  top:10rem;
}



/* Intro
–––––––––––––––––––––––––––––––––––––––––––––––––– */




/* Bus Position
–––––––––––––––––––––––––––––––––––––––––––––––––– */
.busposition {
  display: block;
  background-image: url('../images/buses.png');
  background-size: cover;
}
.big-phone {
  display: block;
  float: right;

}
.bus-position.contents {
  display: block;
  float: left;

}

/* Bus Route
–––––––––––––––––––––––––––––––––––––––––––––––––– */


/* Bus Operation Status
–––––––––––––––––––––––––––––––––––––––––––––––––– */
.bus-operation-status{
  background-color: #AEFFEE;
}

/* Any Device
–––––––––––––––––––––––––––––––––––––––––––––––––– */

.any-device {
  background-image: url('../images/any_device.png');
  background-size: cover;
}
.devices {
  display: block;
  box-sizing: border-box;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;

}


/* Footer
–––––––––––––––––––––––––––––––––––––––––––––––––– */
.footer {
  background-color: #17C0FF;
  margin-bottom: 10px;
  padding: 8rem 0 7rem;
  text-align: center;
}

p.footer-operation{
  color:white;
}
p.footer-inquiry{
  color:white;
}
p.footer-mail{
  color:white;
}



/* Media
–––––––––––––––––––––––––––––––––––––––––––––––––– */

@media (min-width: 400px) {
  .phone {
    position: absolute;
    top: 0.5rem;
    left: -1rem;
    max-height: 362px;
    z-index: 3;
  }

  .qr {
    max-height:50px;
  }

}

/* Bigger than 550 */
@media (min-width: 550px) {
  .section {
    padding: 12rem 0 11rem;
  }
  .hero {
    padding-bottom: 12rem;
    text-align: left;
    height: 165px;
  }
  .phone {
    position: absolute;
    top: 0.5rem;
    left: -1rem;
    max-height: 362px;
    z-index: 3;
  }
  .phone + .phone {
    top: -6rem;
    display: block;
    max-width: 73.8%;
    left:2rem;
    z-index: -7;
    max-height: 640px;
  }
  .hero-heading {
    font-size: 3rem;
    margin-top: 4rem;
  }

  .qr {
    max-height:80px;
  }
}



/* Bigger than 750 */
@media (min-width: 750px) {
  .hero {
    height: 190px;
  }
  .hero-heading {
    font-size: 4.4rem;
  }
  .section {
    padding: 14rem 0 15rem;
  }
  .hero {
    padding: 16rem 0 14rem;
  }

  .phone {
    top: -8rem;
    left: 2rem;
    max-height: 720px;
  }

  .qr {
    max-height:120px;
  }
}

/* Bigger than 1000 */
@media (min-width: 1000px) {
  .section {
    padding: 20rem 0 19rem;
  }
  .hero {
    padding: 22rem 0;
  }
  .hero-heading {
    font-size: 5.0rem;
    right: -5rem;
  }
  .phone {
    top: -11rem;
    max-height: 990px;
    max-width: 468px;
    left:5rem;
  }

  .qr {
    max-height:140px;
  }
  .big-phone {
    max-height:1091px;


  }

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

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

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

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

    • 質問内容が明確
    • 自分も答えを知りたい
    • 質問者以外のユーザにも役立つ

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

回答 2

+1

↓最後のセミコロンが足りません。

.section.hero {
 box-sizing: border-box;
  height:60vh
}


↓このセレクタの書き方だと、.hero-subcopyのclassを持った.heroになってしまうので、スタイルが効きません。

.hero.hero-subcopy {
  top:10rem;
}

.hero.hero-heading {
  top:10rem;
}


全体的によくチェックしないと、組み方が悪いのか、ケアレスミスで効いていないだけなのかわからないので、まずは正確に記述できるようにしたほうが良いですよ。

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2016/08/18 14:46

    ご回答ありがとうございます。
    ケアレスミス多いですね。。。

    キャンセル

check解決した方法

0

下記でできた。

/* コンテンツの高さが画像の高さより大きい時、動かないように固定 */
background-attachment: fixed;

入れるか入れないかお好み

.hero {
  /* 画像ファイルの指定 */
  background-image: url(images/background-photo.jpg);

  /* 画像を常に天地左右の中央に配置 */
  background-position: center center;

  /* 画像をタイル状に繰り返し表示しない */
  background-repeat: no-repeat;

  /* コンテンツの高さが画像の高さより大きい時、動かないように固定 */
  background-attachment: fixed;

  /* 表示するコンテナの大きさに基づいて、背景画像を調整 */
  background-size: cover;

  /* 背景画像が読み込まれる前に表示される背景のカラー */
  background-color: #464646;
}

リンク内容

投稿

編集

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

同じタグがついた質問を見る

  • HTML5

    5121questions

    HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

  • CSS3

    2623questions

    CSS(Cascading Style Sheet)の第3版です。CSS3と略されることが多いです。色やデザインを柔軟に変更することが可能になります。

  • CSSフレームワーク

    189questions

    CSSフレームワークは、Webページのスタイルを指定する言語であるCSSを容易に構築するためのツールです。ツイッター社が開発した「Bootstrap」や段組レイアウトが可能な「Foundation」など様々なCSSフレームワークがあります。