Hintergrundabdeckung funktioniert nicht auf Mobilgeräten

Ich versuche eine Website zu erstellen, die Vollbild-Hintergrundbilder enthält. Ich habe es auf Desktop-Versionen funktioniert, aber wenn ich es auf github schieben und es auf meinem Handy anzeigen, ist das Hintergrundbild nur ein langes Bild an der Spitze. Ich verwende die background-size: cover in meinem css. Screenshots unten. Wie kann ich es so mobil machen, dass es den ganzen Raum einnimmt? Thanks :)Hintergrundabdeckung funktioniert nicht auf Mobilgeräten

Desktop-Version:

Mobil-Version:

.background1 
{ 
/* Location of the image */ 
background-image: url(images/background-photo.jpg); 

/* Image is centered vertically and horizontally at all times */ 
background-position: center center; 

/* Image doesn't repeat */ 
background-repeat: no-repeat; 

/* Makes the image fixed in the viewpoint so that it doesn't move when 
the content height is greater than the image height */ 
background-attachment: fixed; 

/* This is what makes the background image 
rescale based on itscontainer's size */ 
background-size: cover; 

/* Pick a solid background color that will 
be displayed while the background image is loading */ 
background-color:#464646; 
}

Html wird wie folgt

<head> 
<script src="https: 
//ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"</script> 
<script 
src="https://cdn.jsdelivr.net/lodash/4.11.2/lodash.min.js"></script> 
</head> 
<meta charset="utf-8"> 
<title>Color</title> 
<link rel="stylesheet" href="style.css"> 
<link href="animate.css" rel="stylesheet"> 
</header> 

<body id="bodyID" class="background1"> 
</body> 

<script src="javascript.js"></script>

Quelle

2016-04-26 Francine Jones

Haben Sie die minimale oder maximale Höhe oder Höhe definiert? Vielleicht kannst du die HTML-Codes teilen, um mich überprüfen zu lassen. Und für den Hintergrund css, hier ist der bessere nützliche Code.

background: #464646 url(images/background-photo.jpg) no-repeat center center; 
background-size: cover;

Quelle

2016-04-26 03:18:11

Hallo, Ich habe Ihr Beispiel oben versucht, aber einige meiner anderen Funktionen auf meiner Website funktioniert nicht mehr. Meine Website durchläuft die Hintergrundbilder in voller Größe mit Javascript-Rad-Ereignissen und ihre Temperament zu bestimmten Dingen, die ich ändern, ich weiß nicht warum. Wie auch immer im body-Tag ist die Klasse zu den verschiedenen Bildern in der CSS ausgewechselt. Erzähl mir mehr über die minimale Höhe und maximale Höhe. –

Live auf GitHub Hier http://francinejones.github.io/ –

Es funktioniert gut, wenn nur mit dem HTML und CSS für mich. Ich denke, dass die Script-Wheel-Funktion aus irgendeinem Grund nicht richtig funktioniert. Kann für das Format cos sein. Dies ist ungefähr für Min-Höhe und Max-Höhe. http://www.w3schools.com/cssref/pr_dim_max-height.asp http://www.w3schools.com/cssref/pr_dim_min-height.asp –

Das Problem ergibt sich aus dem Element <body> die Höhe nicht mit dem Gerät passen. Sie könnten ein height: 100% auf html, body zu halten, aber ich denke, der einfache Weg, dies zu tun, wäre folgend hinzuzufügen:

body { 
    height: 100vh; 
}

Dadurch wird die Höhe des Körperelementes setzt auf 100% des Darstellungshöhe auf Last. Ich habe es getestet und es löst das Problem auf meinem Android-Gerät und bricht es nicht auf dem Desktop.

Seitennotiz: Sie können Ihr Android-Gerät mit Chrome-Inspektor-Tools debuggen, indem Sie Google's instructions folgen.

Quelle

2016-04-26 19:14:56

Hintergrundabdeckung funktioniert nicht auf Mobilgeräten

Antwort

Verwandte Themen