Question

当它们是内容时，我可以缩放图像以填充窗口，如下所示：（没有任何html5或div）

  <style type="text/css">
img {
width:100%;
height:100%;
margin:0px;
}
  </style>

和

<img src="wacard.png" alt="original image" title="">

但

这失败了（“html，body”和“body”）

  <style type="text/css">
body {
width:100%;
height:100%;
margin:0px;
}
  </style>

和

<body
 style="background-image: url(wacard.png);">
</body>

拾起从这里拾起：Resize HTML5 canvas to fit window但据我所知，那必须有一些比我知道的更奇特的代码，继续，......或者我做错了什么......

如何才能获得背景图像？（理想情况下，没有javascript）

Answer 1

这是一个很好的教程，有几个解决方案： http://css-tricks.com/perfect-full-page-background-image/ 完成演示和分步编码过程。

提到的HTML5方式是：

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

文章中提到了一个ie修复。

Answer 2

据我了解，您想要创建一个完整页面重新调整大小的背景。如果是这样，请按照此处的说明操作=＆gt; http://css-tricks.com/perfect-full-page-background-image/

Answer 3

还考虑进一步审查和选项，如我的情况，

的价值

background-position:

设置选项......

http://developer.mozilla.org/en-US/docs/Web/CSS/background-position

以及

background-origin:

https://developer.mozilla.org/en-US/docs/Web/CSS/background-origin

伴随backbackground-image CSS样式设置。

Answer 4

模仿，并添加了背景图片

例如background: url(back.jpg) fixed;

使它缩放所需的全部是

background-size: cover;

少就是多。 ;）

css比例背景图像

4 个答案: