首页 文章

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

提问于
浏览 次
45

我有一个名为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 css background-image

4 回答

  • 94

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

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

    http://jsfiddle.net/8XUjP/

    回复于
  • 47

    如果你不想让你的背景失去比例，我会推荐 background-size: cover; ：JS Fiddle

    html { 
  background: url(image/path) no-repeat center center fixed; 
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
}

    资料来源：http://css-tricks.com/perfect-full-page-background-image/

    回复于
  • 5
    html, body {
    min-height: 100%;
}

    会做的伎俩 .

    默认情况下，即使是html和body也只有它们所持有的内容一样大，但绝不会超过窗口的宽度/高度 . 这通常会导致相当奇怪的结果 .

    您可能还想阅读http://css-tricks.com/perfect-full-page-background-image/

    有一些很好的方法可以实现非常好的和可扩展的完整背景图像 .

    回复于
  • 2

    vh单元可用于填充视口的背景，即浏览器窗口 . (height:100vh;)

    html{
    height:100%;
    }
.body {
     background: url(image.jpg) no-repeat center top; 
     background-size: cover; 
     height:100vh;     
}
    回复于

相关问题