Question

我的网站有一个背景图片，当我在Html中获取图片时，它会在整个页面上拼贴并停在同一个地方。如何调整图像大小以填充窗口并向下滚动页面，以便文本和内容看起来像是在页面上移动？我已经在你的答案中使用了代码并且图像显示并且没有平铺但是它会在页面上重复而不是向下滚动？

<body background="D:\Documents and Settings\HOME\Desktop\Nathan Taylor\Mancuerda\Web Page\Background copy.jpg" background style="fixed">
<style type="text/css">
html{
    background-image: url(D:\Documents and Settings\HOME\Desktop\Nathan Taylor\Mancuerda\Web Page\Background copy.jpg) no-repeat center center fixed; 
    background-repeat: no-repeat;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
}
</style>

我正在使用的脚本。

Answer 1

*使用jsFiddle更新了：http://jsfiddle.net/q5WKg/1/

要阻止背景重复你想要在CSS中执行：

background-repeat:no-repeat;

要使背景始终填充，请使用css3属性：

background-size: cover;

由于尚未广泛实施，您可能需要使用供应商前缀：

-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;

除了你的评论之外 - 完全看起来像这样：

<style type="text/css">
html
{
    background-image: url('path/to/imagefile.jpg'); 
    background-position:center center;
    background-repeat:no-repeat;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;

}
</style>

如果您的背景图片位于html元素上。

*更新2

我会纠正上面的代码，将你的样式声明移到文档的头部（虽然你把它放在大多数浏览器中都可以正常工作）并从body标签中删除任何有关背景图像的信息。

您提供的URL也是计算机上文件的绝对路径 - 您需要真正使用相对路径，而不是依赖于您的计算机文件结构的路径，我假设HTML文档是在与“Background copy.jpg”相同的文件夹中。因此，您的代码应如下所示：

<!DOCTYPE html>
<html>
<head>
<style type="text/css">
html{
    background: url('Background copy.jpg') no-repeat center center fixed; 
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
    width:100%;
    height:100%;
}
</style>
</head>
<body>
CONTENT
</body>
</html>

除了对代码的更新之外，我还会将您使用的任何图像的名称更改为小写，并且在其文件名中不包含任何空格 - 这将为您节省更多的麻烦......

如果你想更好地理解HTML / CSS是如何工作的，以及如何正确地构建它们，我会在w3cschools上阅读，他们可以选择在很多页面上“自己尝试”，这意味着你可以看到代码应该是结构化的，并使用CSS＆amp; amp; HTML。

w3schools css教程 - http://www.w3schools.com/css/default.asp

Answer 2

可能这个：

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

对于IE - IE9 +，其他浏览器 - 应该可以工作。

此处有更多信息：http://css-tricks.com/perfect-full-page-background-image/

P.S。您可能也对视差感兴趣。

Answer 3

为背景图片设置几个选项：

html,body{

    background-image: url('your/image/path');
    background-repeat: no-repeat;
    background-size: cover; // this fills up the complete page.
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
}

希望它有所帮助！

Answer 4

https://css-tricks.com/perfect-full-page-background-image/

在这个网站的版本中，它完美无缺。这是代码：

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

如何滚动背景图像而不在页面上平铺？

4 个答案: