Cep Telefonu Arka Plan Resimleri Yakınlaştırılmış

Question

Bu satırda birkaç sorgu buldum ve bunların çözümleri yoktu ya da çözümleri benim için çalışmadı. Medya sorgularım var, en küçük maksimum genişlik (700 piksel) ve tarayıcımla sitemi önizlemeyle tarayıcımın iPhone genişliğini ayarladığımda, önizleme gayet iyi. Ancak, gerçek iPhone'umda önizleme yapıldığında, fotoğrafın yalnızca çok küçük bir bölümünü gösterir. (Hem Safari hem de Chrome'da.) Test etmek için elimde olmayan Android cihazlarından emin değilim.

Düzenleme: İşte http://www.dragonflyav.com

Full sitesi CSS: Ben basit bir şey eksik eminim

@media (max-width: 700px) { 
 
    .intro { 
 
     background-image: url("images/backgrounds/fleet-top-770.jpg"); 
 
     background-size: cover; 
 
     -webkit-background-size: cover; 
 
     -moz-background-size: cover; 
 
     -o-background-size: cover; 
 
     background-position: center top; 
 
     background-repeat: no-repeat; 
 
     background-attachment: fixed; 
 
     height: 75vh; 
 
    }

, ben birkaç varyasyonu denedim Yukarıda, her bir farklı mülkün teker teker boşa gitmesi dahil, şanssız. şöyle My HTML meta etiketi: Yanlış stil overrulling olan

 <meta name="viewport" content="width=device-width" content="initial-scale-1">

Answer 1

.

background: url(images/backgrounds/fleet-top-2400.jpg) no-repeat center center fixed; 

ve duyarlı üzerinde kullandığınız: masaüstü stil üzerinde kullandığınız

background-image: url("images/backgrounds/fleet-top-770.jpg"); 

Bu şekilde duyarlı görüntünün üst kısmında masaüstü görüntüsünü görerek edilecektir. Sadece bir arka plan özelliği kullanmak sizin için çözecektir.

background-image: url(images/backgrounds/fleet-top-2400.jpg) no-repeat center center fixed;