2016-12-16 4 views
1

私はspn webアプリケーションの背景イメージを設定しようとしていますが、背景を修正する必要があります(ページの残りの部分ではスクロールされません)。背景代わりの一点でそれを固定IOSとChromeでbackground-attachment:携帯電話で固定

body { 
    background-color: rgb(51, 102, 102); 
    background-image: url('../images/background.png'); 
    background-attachment: fixed; 
    background-position: center; 
    color: #eee; 
} 

サファリアンドロイド反復で:

これは、身体CSSです。

インターネットでは携帯端末では無効になっていますが、解決方法はありますか?

答えて

0
background-repeat: no-repeat; 
background-position: center center; 
0

これには他にもオプションがありますが、実際に私のために働いたのはこれだけです。私はそれらのすべてについてちょうど試しました。

最初のタグのすぐ下にdivを設定します。その後、div内のhtmlにイメージを適用します。 div属性とid属性も指定します(この場合は#background_wrap)。 ...私はhtml内の実際の画像リンクを適用せずにこれを試しましたが、css内のバックグラウンドに画像を適用する際には "background-image:"属性を使用する必要があるため正しく機能しませんでした。モバイルデバイス上でこれを動作させるためのトリックは、背景イメージの設定を使用していません。これらの値は私のプロジェクトに特有のものでしたが、私の固定された背景イメージは、モバイルや大きなコンピュータのビューポートに集中して反応し続けるためには完全に機能しました。あなたの特定のプロジェクトのために値を微調整しなければならないかもしれませんが、試してみる価値があります!私はこれが役立つことを願っています

<body> 
    <div id="background_wrap"><img src="~/images/yourimage.png"/></div> 
</body> 

次に、これらの設定をCSSに適用します。

#background_wrap { 
margin-left: auto; 
margin-right: auto; 
} 
    #background_wrap img { 
     z-index: -1; 
     position: fixed; 
     padding-top: 4.7em; 
     padding-left: 10%; 
     width: 90%; 
    }