Mobile Hintergrund Bilder Zoomed In

Question

Ich habe mehrere Abfragen in dieser Zeile gefunden, und sie hatten entweder keine Lösungen oder ihre Lösungen funktionierten nicht für mich. Ich habe Medienabfragen eingerichtet, die kleinste ist max-width (700px), und wenn ich eine Vorschau der Website auf meinem Desktop mit meinem Browser auf die Breite eines iPhone eingestellt, es Vorschau gut. Allerdings, wenn Vorschau auf meinem aktuellen iPhone, zeigt es nur einen sehr kleinen Teil des Fotos. (Sowohl in Safari als auch in Chrome.) Ich bin nicht sicher, ob es Android-Geräte gibt, da ich keine zum Testen habe.

Edit: Ganze Seiten bei http://www.dragonflyav.com

Hier ist die CSS:

@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; 
 
    }

Ich bin sicher, dass ich etwas einfach fehlt bin, habe ich mehrere Varianten der bewährten oben, einschließlich das Graben jeder einzelnen Eigenschaft einzeln, ohne Glück. Mein HTML-Meta-Tag ist wie folgt:

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

Answer 1

Sie sind die falsche Styling overrulling. Auf dem Desktop-Styling Sie verwenden:

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

und am reaktions Sie verwenden:

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

Auf diese Weise werden Sie die Desktop-Bild auf dem ansprechenden Bild zu sehen. Mit nur einer Hintergrundeigenschaft lösen Sie es für Sie. So würde ich persönlich halten Sie sich an:

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