如何显示全身高度的背景

How to display a background for full body height

本文关键字：高度 背景 何显示 显示      更新时间：2023-09-26

我试图在body load的背景上显示一些随机显示图像。我有一个函数。现在的问题是图像正在显示整个页面，直到web浏览器可以滚动，这是非常漫长的我想要它只显示，直到身体的高度和宽度。下面是我使用的代码:

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]);
}

正文是整个页面。你需要的是屏幕的高度和宽度。为此，在body内部创建一个div，并将图像作为div的背景，使用单位100vh, 100vw;

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

就这么做

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

确保background-size属性设置为"cover"

如上所述，正文是整个页面。你想要"viewport"的宽度/高度。这就是另一个答案所涵盖的内容。另一种方法是使用CSS设置html标签的背景图像，如下所示:

        <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>
相关文章：