无涯教程网

CSS：将背景图像拉伸到屏幕的 100% 宽度和高度

发布于04月06日

我有一个名为myImage.jpg的映像.这是我的CSS:

body {
    background-image:url("../images/myImage.jpg");
    background-repeat: no-repeat;
    background-size: 100% 100%;
}

由于某些原因，当我这样做时，myImage的宽度延伸到整个屏幕，但高度只延伸到页面上其他所有东西的高度.所以如果我放一堆

<br>

在我的html页面中，那么高度就会增加.如果我的HTML页面仅由

<div id='header'>
    <br>
</div>

那么背景图像的高度就只有一个的高度

<br>

如何使我的背景图像的高度达到用户用来查看网页的屏幕的100%？

推荐答案

您需要将高度设置为html到100%

body {
    background-image:url("../images/myImage.jpg");
    background-repeat: no-repeat;
    background-size: 100% 100%;
}
html {
    height: 100%
}

http://jsfiddle.net/8XUjP/个

Css相关问答推荐

基于子元素的子元素数量的样式元素

添加Angular 17的Stackblitz项目的Angular material 主题？

如何为垫子制作圆角- Select 所有角点上的下拉列表

如何使用在另一个层定义块中定义的sass层作用域变量

SVG文本在移动浏览器上增长并溢出

Next.js 条件样式

CSS Select 器在 rvest 中找到，在 RSelenium 中找不到

Mat table - 保留第一列和复选框

Nativewind 的某些样式不适用于本机 (Android)，但它们适用于网络

如何添加一个类以在开始时触发转换

在revealjs/Quarto中定义一类反背景的幻灯片

tailwind 类的别名？

使用 CSS 在悬停时转换 SVG 路径的填充属性

为什么我们将