Hintergrund-Bild Strecke über Ansichtsfenster passen

Ich habe eine Seite, wo ich will ein Vollbild-Hintergrundbild. Das funktioniert gut, wenn der Körper in das Ansichtsfenster passt. Ich habe html {height: 100%; } und Körper {min-Höhe: 100%; padding-top: 70px; ... Hintergrundgröße: Cover; } (das obere Padding ist für einen Seitenkopf). Das Problem tritt auf, wenn die Seite größer als das Ansichtsfenster wird. Der Körper erstreckt sich auf die richtige Höhe, aber der Hintergrund Befestigung wächst nie größer als die Größe des Bildfensters. Hier ist eine Beispielgeige [https://jsfiddle.net/xdsgek6t/]. In der Live-Version gibt es auch eine Bildüberlagerung, aber in der Geige können Sie bequem die Linie sehen, wo die radialen Gradienten enden, obwohl ich ihm gesagt habe, um den Körper zu bedecken, das in dieser Geige 3000px hoch wegen eines Kind Element.Hintergrund-Bild Strecke über Ansichtsfenster passen

html { height: 100%; box-sizing: border-box; } 
 
body { 
 
    overflow-y: scroll; 
 
    padding-bottom: 30px; 
 
    padding-top: 70px; 
 
    background-color: #363636; 
 
    min-height: 100%; 
 
\t background-color: #1976D2; 
 
\t background-image: radial-gradient(circle at top right, #64B5F6 0%, #1976D2 90%); 
 
\t background-repeat: no-repeat; 
 
\t background-attachment: scroll; 
 
\t background-position: right 70px; 
 
\t background-size: cover; 
 
    margin: 0; 
 
    box-sizing: border-box; 
 
} 
 
div.something { height: 3000px; width: 10px; } 
 
header { position: absolute; width: 100%; top: 0; left: 0; height: 70px; z-index: 500; background-color: #ddd; }

<body> 
 
    <header></header> 
 
    <div class="something"></div> 
 
</body>

Das ist wirklich seltsam aussehenden endet, wenn die Seite ein klein wenig größer wird, und ist auf mobilen wirklich offensichtlich.

Quelle

2017-02-28 Adam Marr

eine Hintergrundfarbe in den HTML und Körper Hintergrund effektiv auf gezeichnet werden Körperhintergrund. Es ist eine lustige Sache hier über bg auf HTML/BODY. Wenn Sie einen Hintergrund für einen der beiden festlegen, wird dieser auf HTML gezeichnet. Also, den Unterschied zu machen, eine Regel für beide von ihnen und nicht transparent verwenden als bg-Farbe aber jede normale Farbe wird gut ... https://jsfiddle.net/xdsgek6t/2/ –

einig Referenz hinzufügen zu meinem vorherigen Kommentar: https://www.w3.org/TR/css3-background/#root-background –

sehr interessant, danke für die Informationen! –

Entfernen height: 100%; von html und es wird länger. Und wenn Sie min-height: 100% auf body benötigen, können Sie min-height: 100vh verwenden stattdessen, und das wird sich nicht auf height: 100% auf html

html { box-sizing: border-box; } 
 
body { 
 
    overflow-y: scroll; 
 
    padding-bottom: 30px; 
 
    padding-top: 70px; 
 
    background-color: #363636; 
 
    min-height: 100vh; 
 
\t background-color: #1976D2; 
 
\t background-image: radial-gradient(circle at top right, #64B5F6 0%, #1976D2 90%); 
 
\t background-repeat: no-repeat; 
 
\t background-attachment: scroll; 
 
\t background-position: right 70px; 
 
\t background-size: cover; 
 
    margin: 0; 
 
    box-sizing: border-box; 
 
} 
 
div.something { height: 3000px; width: 10px; } 
 
header { position: absolute; width: 100%; top: 0; left: 0; height: 70px; z-index: 500; background-color: #ddd; }

<header></header> 
 
<div class="something"></div>

Quelle

2017-02-28 00:05:17

Perfekt, danke. Und genau deshalb hatte ich html 100%, also danke für den 100vh Vorschlag. –

@AdamMarr süß, np. –

Hintergrund-Bild Strecke über Ansichtsfenster passen

Antwort

Verwandte Themen