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')

不重复左上角滚动;

我试图放入背景大小：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

您可以通过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;

Answer 3

如果kunoo的解决方案不适合你（因为你需要支持旧的浏览器，主要是邪恶的IE），那么就有nice jquery plugin named backstretch。我使用它很多，而且它的工作完美无缺。它使背景图像适合整个屏幕，即使在调整窗口大小时也是如此。

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

3 个答案: