背景图像使用HTML5来适应页面

我想使一个图像的网站的完整背景！我知道这听起来很简单，但它只是让我疯狂，它不适合页面，这是我最后一次尝试

CSS:

我也在使用推特引导，但是如果没有它，我就无法正确使用它

任何帮助都将不胜感激

编辑：我没有使用精确的像素，因为我正在尝试一个响应性+移动设计

我不知道他们为什么否决了这个问题！但我就是这样解决的

html, body {
    margin: 0;
    padding: 0;
    height: 100%;
}


#mybody {
background:  url('images/bodybg.jpg') no-repeat center left;
 background-size: 100% 100%;
width: 100%;
height: 100%;
height: auto !important;
min-height:100%;
}

#myheader {
background:  url('images/headerbg.jpg') no-repeat center left;
 background-size: 100% 100%;
width: 100%;
height: 100%;
height: auto !important;
min-height:100%;
}

#myfooter {
background: url('images/footerbg.jpg') no-repeat center left;
background-size: 100% 100%;
width: 100%;
height: 100%;
height: auto !important;
min-height:100%;
}

---

您可以通过添加属性

后台附件：fixed

body {
  background:url('http://dummyimage.com/1080/9494ff/0011ff.png') #A98436 no-repeat;
  background-attachment: fixed;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  background-size: cover;
}


但你们必须知道，若页面维度和图像维度的比率不同，那个么图像可以在窗口中剪切

编辑
如果高度对您来说更重要，请将参数
倒圆尺寸更改为
containt
：

body {
  background:url('http://dummyimage.com/1080/9494ff/0011ff.png') #A98436 no-repeat 50% 50%;
  background-attachment: fixed;
  -webkit-background-size: contain;
  -moz-background-size: contain;
  background-size: contain;
}

您需要设置页面第一个元素的高度

html, body { margin:0; height: 100%;}

编辑：我创建了一个删除了一些不必要的东西的。这样做的好处是不打开背景图片的窗口。但是没有像下面引用的代码那样进行广泛的测试

我最近在一个项目中工作，我们需要这个确切的东西。我是从我的项目文件中发布的，所以其中一些可能是不必要的，因为这是一个团队成员写的

首先设置html和正文的属性。
然后，在主体内部有一个根div，名为background

html, body {
    margin: 0;
    padding: 0;
    height: 100%;
}
#background {
    background: #000000 url(urlHere) no-repeat bottom left;
    background-size: 100% 100%;
    width: 100%;
    height: 100%;
    height: auto !important;
    min-height:100%;
}

同样，我确信其中一些是不必要的，但我希望它有帮助。
为什么不将img导入Flash（Microsoft程序）并将img转换为矢量img（矢量：图像质量在改变高度和宽度时不会受到太大影响。）在对矢量img进行调整后（将img更改为当前平台的分辨率）保存它并将其应用于HTML。我建议制作一份备份副本，特别是当您的跨平台将HTML转换为不同分辨率时。
尝试宽度：100%，然后删除您在背景中的注释。封面将按容器的全宽缩放图像，同时保持纵横比。我认为您的背景在使用封面时，ound正在重复，请尝试以下操作，
html，正文{width:100%；最小高度：100%；高度：100%；溢出：隐藏；}
；您可以澄清该注释吗？您似乎想要全宽和全高。如果您使用
html，正文{width:100%；height:100%；}设置了页面的宽度和高度
，WooCaSh的答案应该对你有用。我自己也在胡闹，傻瓜！=）我们知道你不想重复它=），你想让它覆盖整个页面。但是如果你只想要图像的全宽和全高，那么使用
背景尺寸：自动
如果你想覆盖全宽，试试
背景尺寸：100%自动
@CeaneLamerez，看起来他想得到与原稿相同比例/比例的walpaper。。。没有任何空白，没有任何切割。。。这是不可能的。我的意思是，如果他准备好所有的图像组合来覆盖图像的所有维度/比率和节拍，这是可能的：）我认为他不会说葡萄牙语=（Ele nao falo portuguesYes，我还可以用中文/墨水/埃及语建立链接，这会像您的陛下一样非常有用。我试过这个，和上面的评论一样，它一直给我一个可滚动的窗口，但不是图像的实际大小。@Observer图像的大小是多少？@monteirobrena其中一个是1600 x 2024，然后我试了一个另一个是来自另一个网站的2800x1700，仍然没有做任何更改！它仍然不起作用！它从高度上剪切！我使图像的尺寸更小，仍然！更小的意思是1024x760..仍然：（！因为窗口高度与显示器的分辨率不同。浏览器的高度比显示器的要小。能否显示我的代码结果？只需共享printscreen。我还不能发布照片！但当我使用您的代码片段时，它只会剪切图像的较低部分。好的，现在发生的情况是，图像显示为全高，但宽度缩小到中间，使两侧空白，与我提供的背景色相同（！天哪，我无法解决这个问题。你无法将图像完整地传递到浏览器主体中，因为如果有人使用其他浏览器，例如具有不同的顶栏，则他的身体高度比你的小。所以比例将永远不会相同。请使用我的示例并调整浏览器窗口大小，以查看具有背景的形状。
高度：100%；高度：auto！重要；
是一种黑客行为还是你的错误？首先你将height设置为100%，然后将其覆盖为auto-。-这就是为什么我注意到其中一些是不必要的，我是从一个旧项目中引入的。更多的是想帮你。谢谢，我选择了你的，因为它给了我一个这样解决问题的想法ybody{background:url（'images/bodybg.jpg'）不重复中间偏左；背景大小：100%100%；宽度：100%；高度：100%；高度：自动！重要；最小高度：100%；}}我的页眉{}我练习了一点删除垃圾。我发现最重要的部分是：高度100%到父级（html，正文）。高度：自动！重要；（在图片中）和（最小高度：100%）；）在图片中。我的箱子也有一些拉伸，可以用背景尺寸固定：封面；不过非常感谢！
html, body {
    margin: 0;
    padding: 0;
    height: 100%;
}
#background {
    background: #000000 url(urlHere) no-repeat bottom left;
    background-size: 100% 100%;
    width: 100%;
    height: 100%;
    height: auto !important;
    min-height:100%;
}