Wie man einen Hintergrund für volle Körpergröße anzeigt

Question

Ich versuche, einige zufällige Anzeigebilder auf dem Hintergrund der Körperlast anzuzeigen. Dafür habe ich eine Funktion. Jetzt ist das Problem, dass die Bilder für die ganze Seite angezeigt werden, bis der Webbrowser scrollen kann, was sehr lang ist. Ich will, dass es nur bis Körperhöhe und -breite angezeigt wird. Folgendes ist der Code, den ich verwende:

var body = document.body; 
var html = document.documentElement; 
var bodyHeight = Math.floor(Math.min(body.scrollHeight)); 
var htmlHeight = Math.floor(Math.min(html.scrollHeight)); 

var height = Math.max(bodyHeight, htmlHeight); 

for(i=0; i<height; i++){ 
var images = [], 


--------------- 
----------------- 
image array here 
-------------------- 
------------------------- 
index = Math.floor(Math.random() * images.length); 

document.write(images[index]); 

} 

Answer 1

Der Körper ist die ganze Seite. Was Sie wollen, ist die Bildschirmhöhe und -breite. Dafür erstellen Sie ein Div innerhalb des Körpers und legen Sie das Bild als Hintergrund des Div, mit Einheiten 100vh, 100vw;

https://devcode.la/tutoriales/unidades-vh-vw-css/

Answer 2

Genau dies tun

body{ 
background-image:url(''); 
background-position:100% 100%; 
**background-size:cover;** 
width:100%; 
background-attachment:fixed; 
} 

Sie die Hintergrund-size Eigenschaft sicherzustellen ist auf "Abdeckung".

Answer 3

Wie erwähnt, ist der Körper die ganze Seite. Sie möchten die Breite/Höhe des Ansichtsfensters. Das ist, was die andere Antwort deckt. Ein anderer Ansatz verwendet einfach CSS, um das Hintergrundbild des HTML-Tags wie folgt zu setzen:

 <style> 
     html { 
      background-image: url('https://images.unsplash.com/photo-1478427433968-28045906c1dd?ixlib=rb-0.3.5&q=80&fm=jpg&crop=entropy&cs=tinysrgb&s=f1c8cb36c65c1e472e0ebf9ef6d4eac5'); 
      background-size: cover; 
      background-position: center; 
      background-repeat: no-repeat; 
      height: 100%; min-height: 100%; 
     } 
     </style>