サポート » 使い方全般 » 背景画像を高さ100%で表示できない

  • 解決済 9-taro

    (@9-taro)


    お世話になります。
    スライダー背景画像を高さ100%で表示したいのですが、100pxや100vhの絶対値では、表示されるのですが、100%に指定すると、スライダー自体表示されなくなります。
    おそらく親要素の影響だと思うのですが、body、htmlタグは高さ100%に、親要素のスタイルもそれぞれ同じように設定してるのですが、その他、どこを疑ったら良いでしょうか?
    スライダー自体は、絶対値で指定すれば動作します。
    ご教示いただければ、助かります。

    以下html————–
    <div class=”swiper-container”>
    <div class=”swiper-wrapper”>
    <div class=”swiper-slide slider-1″></div>
    <div class=”swiper-slide slider-2″></div>
    <div class=”swiper-slide slider-3″></div>
    <div class=”swiper-slide slider-4″></div>
    <div class=”swiper-slide slider-5″></div>
    </div>

    以下css—————-
    .swiper-container {
    width: 100%;
    height: 100%!important;
    }

    .swiper-wrapper {
    width: 100%;
    height: 100%!important;
    }

    .slider-1{
    background-image:url(“●●.jpg”);
    }
    .slider-2{
    background-image:url(“●●.jpg”);
    }
    .slider-3{
    background-image:url(“●●.jpg”);
    }

    .swiper-slide {
    background-position: center center;
    background-size: cover;
    background-repeat: no-repeat;
    width: 100%;
    height: 100%!important;
    }

    html,
    body {
    position: relative;
    height: 100%;
    }

2件の返信を表示中 - 1 - 2件目 (全2件中)
  • こんにちは

    背景画像のサイズはbackground-sizeで指定するものと思いますが、coverを指定しているのでそれなりに最大の高さで表示されているのではないかと思いますが・・・

    実際のページのURLを教えて頂ければ、もうちょっと具体的なアドバイスが得られるんじゃないかと思います。

    トピック投稿者 9-taro

    (@9-taro)

    munyagu 様

    早速、ご回答ありがとうございます。
    background-sizeを100%など、いくつか変えてみたのですが、
    うまくいきませんでした。
    非公開のurlのため、掲載できず申し訳ありません。
    テーマのcssの思い当たるところを探してみます。
    ご協力感謝します。

2件の返信を表示中 - 1 - 2件目 (全2件中)
  • トピック「背景画像を高さ100%で表示できない」には新たに返信することはできません。