"Hintergrund-Größe: Abdeckung" deckt nicht mobilen Bildschirm

Ich habe ein Foto Hintergrund auf meiner Website mit background-size:cover. Es funktioniert größtenteils, aber hinterlässt einen seltsamen ~ 30px Leerraum auf meinem Galaxy S3 im Hochformat."Hintergrund-Größe: Abdeckung" deckt nicht mobilen Bildschirm

Ich habe einen Screenshot beigefügt. Die 1px teal Linie soll den gesamten Bildschirm darstellen. Scheint so, als ob der Hintergrund direkt nach den sozialen Medien stoppt ul s.

Ich testete dies, indem Sie die ul und den Hintergrund löste es selbst an den unteren Rand der Tagline-Text.

problem screenshot

Auch hier ist meine CSS Bezug Handy Portait Ansicht:

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

.logo { 
    position: relative; 
    background-size:70%; 
    -webkit-background-size: 70%; 
    -moz-background-size: 70%; 
    -o-background-size: 70%; 
    margin-top: 30px; 
} 

h1 { 
    margin-top: -25px; 
    font-size: 21px; 
    line-height: 21px; 
    margin-bottom: 15px; 
} 

h2 { 
    font-size: 35px; 
    line-height: 35px; 
} 

.footer_mobile { 
    display: block; 
    margin-top: 20px; 
    margin-bottom: 0px; 
} 

li { 
    display: block; 
    font-size: 1.3em; 
}

Dies war früher nicht passieren, aber ich denke, ich versehentlich abgehört, während ein anderes Problem zu lösen versuchen.

Quelle

2012-12-01 Vitaliy G.

HTML, CSS für Hintergrundbild? – tobiv

Das CSS ist 'html { \t \t Hintergrund: URL (../ Bilder/bg.jpg) no-repeat oben rechts behoben; \t \t -webkit-background-size: cover; \t \t -moz-hintergrund-größe: cover; \t \t -o-Hintergrund-Größe: Abdeckung; \t \t Hintergrundgröße: Abdeckung; \t} ' –

Nur ein paar Vermutungen: Haben Sie 'html {height: 100%}' versucht oder versucht, den Hintergrund an 'body' anstatt an' html' anzuhängen? – tobiv

Nach Stunden des Ausprobierens verschiedener Dinge, fügte min-height: 100%; auf den Boden von html unter der { background:... } für mich gearbeitet.

Quelle

2012-12-01 19:47:15

Danke für den Tipp, Kunst! –

Endlich, ein Problem, das jemand anderes stundenlang versucht hat zu lösen, und ich bekomme die fertige Antwort, macht eine Veränderung! Vielen Dank, hat einen Charme. – iforwms

Betrachten Sie '100vh' der Höhe auch hinzuzufügen: http://stackoverflow.com/a/38532368/2418655 – dhaupin

Galaxy S3 hat eine Breite von mehr als 480px im Hoch- oder Querformat, also glaube ich nicht, dass diese CSS-Regeln gelten. Sie müssen 720px verwenden.

Try add:

* { background:transparent }

direkt am Ende & Ihre html { background:... } CSS danach bewegen.

Auf diese Weise können Sie sehen, ob eine mobile Fußzeile div oder ein anderes Element, das Sie erstellt haben, im Weg ist und die Ansicht blockiert.

Auch ich würde versuchen, die Hintergrund-CSS auf Körper statt HTML anzuwenden. Hoffe du kommst näher an die Antwort.

Quelle

2012-12-01 12:12:39

Das deckte den Bildschirm auf halbem Weg. Der Benutzer oben schlug vor, {height: 100%} für das html-Element zu verwenden. Das schien das Problem zu lösen, aber wenn das Gerät in die Landschaft gedreht wird, ist der Bildschirm nur zur Hälfte abgedeckt und weiß für den Rest. Fühlen Sie sich frei, das Problem live zu sehen, wenn Sie können. Vielleicht wird das einfacher. –

Ich habe das auf der Live-Site versucht, aber ich habe kein Galaxy S3. Kein Glück mit meinem Vorschlag? –

Leider nicht. Dies ist, was ich gesehen habe (das ist von meinem Desktop - seltsamerweise konnte das ursprüngliche Problem, das ich hatte, nicht auf dem Desktop repliziert werden, selbst wenn die gleiche Breite/Höhe erreicht wurde) http://i.imgur.com/uZh9q.png –

Dies funktioniert auf Android 4.1.2 und iOS 6.1.3 (iPhone 4) und schaltet für den Desktop. Für reaktionsschnelle Websites geschrieben.

Nur für den Fall, in Ihrem HTML-Kopf, so etwas wie diese:

<meta name="viewport" content="width=device-width, initial-scale=1.0"/>

HTML:

<div class="html-mobile-background"></div>

CSS:

html { 
    /* Whatever you want */ 
} 
.html-mobile-background { 
    position: fixed; 
    z-index: -1; 
    top: 0; 
    left: 0; 
    width: 100%; 
    height: 125%; /* To compensate for mobile browser address bar space */ 
    background: url(/images/bg.jpg) no-repeat; 
    background-size: 100% 100%; 
} 

@media (min-width: 600px) { 
    html { 
     background: url(/images/bg.jpg) no-repeat center center fixed; 
     background-size: cover; 
    } 
    .html-mobile-background { 
     display: none; 
    } 
}

Quelle

2013-10-06 04:57:40

Aktuelle Lösung wäre Darstellungshöhe zu verwenden, (vh) um die gewünschte Höhe anzuzeigen. 100% funktionierte nicht für Mobiles Chrome. CSS:

background-size: cover; 
min-height: 100%;

Quelle

2016-09-05 19:32:44

"Hintergrund-Größe: Abdeckung" deckt nicht mobilen Bildschirm

Antwort

Verwandte Themen