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

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

html css

Html 如何使背景图像滚动而不在页面上平铺？,html,css,Html,Css,我有一个我的网站的背景图片，当我用Html获取图片时，它会在页面上平铺，并停在同一个地方。如何调整图像的大小以填充窗口并向下滚动页面，使文本和内容看起来像是在页面上移动？我已经在你的答案中使用了代码，图像显示并且没有平铺，但是它在页面上重复而不是向下滚动 <body background="D:\Documents and Settings\HOME\Desktop\Nathan Taylor\Mancuerda\Web Page\Background copy.jpg" backgro

我有一个我的网站的背景图片，当我用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>


html{
背景图像：url（D:\Documents and Settings\HOME\Desktop\Nathan Taylor\Mancuerda\Web Page\background copy.jpg）无重复中心修复；
背景重复：无重复；
-webkit背景尺寸：封面；
-moz背景尺寸：封面；
-o-背景尺寸：封面；
背景尺寸：封面；
}

这是我正在使用的脚本。

*使用JSFIDLE更新了：

要阻止背景重复您希望在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
{
背景图像：url（'path/to/imagefile.jpg'）；
背景位置：中心；
背景重复：无重复；
-webkit背景尺寸：封面；
-moz背景尺寸：封面；
-o-背景尺寸：封面；
背景尺寸：封面；
}

如果您的背景图像位于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{
背景：url（'background copy.jpg'）没有固定的重复中心；
-webkit背景尺寸：封面；
-moz背景尺寸：封面；
-o-背景尺寸：封面；
背景尺寸：封面；
宽度：100%；
身高：100%；
}
内容

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

如果你想更好地理解HTML/CSS是如何工作的，以及如何正确地构造它们，我会在w3cschools上读到，他们可以在很多页面上选择“自己尝试”，这意味着你可以看到代码应该如何构造，并用CSS和HTML测试不同的东西

W3CSS教程-

可能是：

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+而言，其他浏览器应该可以使用

更多信息请点击此处：

另外，您可能还对视差感兴趣。

为您的背景图像设置一些选项：

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;
}

希望有帮助

在这个网站的版本中，它工作得非常完美。代码如下：

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;
}

谢谢，那么它会是：{-webkit背景尺寸：cover；-moz背景尺寸：cover；-o-background-size:cover；背景尺寸：cover；}对吗？嗨@NathanTaylor，我更新了答案：）你说你有背景图像-你如何设置这个背景图像？用CSS？我假设它在

主体上设置了CSS

元素我不确定这是一个非常基本的html代码我是新来编码的，所以我只是在玩弄它的代码是这样的我得到了啊好吧，我已经更新了上面的内容，包括

背景图像

，你应该更新它来参考你的背景图像，如果要删除其他事件，则不应使用

…：）设置背景图像我用我的代码尝试了这个，但似乎不起作用。图片没有显示任何想法？