サポート » 使い方全般 » 背景画像固定の中のテキストのレスポンシブ設定

  • お世話になります。
    下記のような高さの300pxほどの背景画像が固定された左右余白なしのものに、
    テキストを載せています。
    レスポンシブ画面で、背景画像全体を表示させたいため、
    background-size: contain;
    またはサイズ指定すると、画像の構図はぴったりなのですが、
    スクロールの際、中のテキストが背景画像から
    飛び出してしまうのですが、これを防ぐ方法はありますでしょうか?
    お手数おかけしますが、よろしくお願いします。

    background-size: cover;
          ↓
    background-size: contain; レスポンシブ版
         または
    background-size: 100% auto;

    以下html————

    <div class=”fixed-bg”><h1 class=”slider-txt”>テキスト文字</h1></div>

    以下css————

    .fixed-bg {  背景画像
    background-image: url(‘●●.jpg’);
    background-attachment: fixed;
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
    height: 300px;
    margin: 0 calc(50% – 50vw);
    width: 100vw;
    position: relative;
    padding:5%;
    }

    .slider-txt { 中のテキスト
    color: #FFF;
    font-size: 1.8rem;
    text-align: center;
    line-height: 2em;
    text-shadow: 2px 2px 3px #111;
     position: absolute;
     top: 50%;
     width: 100%;
    }

    @media screen and (max-width: 600px){ レスポンシブ設定
    .fixed-bg{
    background-size: contain;
    または
    background-size: 100% auto;
    }

  • このトピックに返信するにはログインが必要です。