モバイルデバイス用の別の背景イメージ

Question

私のウェブサイトはhttp://www.rosstheexplorer.com/

です。モバイルでは、背景イメージが私の好みのために小さすぎます。

私は、バックグラウンドイメージの高さを減らすために、 'カスタマイザにバックグラウンドサイズを追加'というプラグインを使用しています。デスクトップ上では、バックグラウンドがページ全体を占めたがりませんでした。

携帯端末の背景画像のサイズを変更することも、完全に別の画像を使用することもできますか？これを実現するプラグインはありますか、使用できるCSSコードがありますか？

Answer 1

Can I change the dimensions of the background image for mobiles or have an entirely separate image? - はい、モバイル用のCSSメディアクエリを使用してこれを達成できます。異なる次元を提供することも、別のイメージを与えることもできます。

あなたは完全に別の画像を使用したり、メディアクエリを使って、お好みに合わせて画像のサイズを変更することができthis

Answer 2

を参照し、メディアクエリの詳細については知っています。例えば、デスクトップ用 、携帯用

.block { 
    background-image: url('images/bg1.jpg'); 
    background-repeat: no-repeat; 
    background-size: 500px; 
} 

（iphoneを言う6+）、

@media screen and (max-width: 414px) { 
    background-image: url('images/bg2.jpg'); 
    background-repeat: no-repeat; 
    background-size: 500px; 
} 

OR

@media screen and (max-width: 414px) { 
    background-image: url('images/bg1.jpg'); 
    background-repeat: no-repeat; 
    background-size: 100px; 
}