html - 如何更改此 html 代码以使我的 tumblr 背景不重复并填满整个页面？

Question

body {
color: #1a1a1a;
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
line-height: 19px;  

background: url('http://www.totallylayouts.com/backgrounds/hipster/triangle_in_the_woods.jpg') 

不重复的左上滚动；

我试图输入 background-size: 100% 100%; 然而它什么也没做......

Answer 1

来自http://css-tricks.com/perfect-full-page-background-image/

一个只有 CSS 的解决方案，适用于任何屏幕分辨率，没有任何空白：

 html { 
  background: url(images/bg.jpg) no-repeat center center fixed; 
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
}

Answer 2

如果 kunoo 的解决方案不适合您（因为您需要支持旧版浏览器，主要是邪恶的 IE），那么有一个不错的 jquery 插件，名为 backstretch。我经常使用它，它工作得很好。它使背景图像适合整个屏幕，即使在调整窗口大小时也是如此。

Answer 3

你可以让它不重复，background-repeat:no-repeat;但你不能让它填满整个页面，最后你可以通过调整背景大小background-size: 0px 0px;

干得好！

  body {
    color: #1a1a1a;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 12px;
    line-height: 19px;  

    background-image: url('http://www.totallylayouts.com/backgrounds/hipster/triangle_in_the_woods.jpg') 
    background-repeat:no-repeat;
    background-size:1920px 1080px;