javascript - 画像付きの HTML CSS フルスクリーン背景

Question

フルスクリーンの背景画像を使用する Web サイトに取り組んでいます。すべての画面タイプで機能させるために、jquery backstretch プラグインを使用しています。

私が抱えている問題は、背景画像にテキストが含まれており、画面サイズが小さくなると、背景の画像と上の画像が重なり合うことです。

説明するのはかなり難しいので、実際のページは次のとおりです。

プレビューページ

ページの幅が 1700 ピクセルを下回ると、問題が発生します。

テキストを背景から分離せずにこの問題を解決する方法はありますか?

Answer 1

background-size: cover;を使用できます。

{
      background: url(http://alicantest.info/public/_images/anasayfa_bg.jpg) no-repeat center center fixed; 
      -webkit-background-size: cover;
      -moz-background-size: cover;
      -o-background-size: cover;
      background-size: cover;
}

またはメディアクエリで他の画像を使用する

@media screen and (max-width: 1700px) {

    {
          background: url(newImage.jpg) no-repeat center center fixed; 
    }

}

Answer 2

メディアクエリで画面が小さい場合、テキストに半透明の背景を追加できます

@media screen and (max-width: 795px){
    #map_text {
        background: rgba(0,0,0,0.7);
    }
}

このコードを CSS の一番下に配置します