背景图像调整大小

时间:2014-06-19 16:57:35

标签: html css

我正在尝试设计一个背景图片的网站,该网站应该在高度和宽度上拉伸 因此,当浏览器窗口调整大小时。解释我想要实现的确切行为是很复杂的,因为这个网站完美地完成了这个行为:

http://de.wix.com/website-template/view/html/709?originUrl=http%3A%2F%2Fde.wix.com%26number-of-page%3D1%26position-in-page%3D4

我将背景大小设置为可能的一切,背景宽度设置为100%,但是 我无法实现这样的行为。

2 个答案:

答案 0 :(得分:2)

您是否尝试过使用以下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;
}

答案 1 :(得分:1)

如果没有您自己的HTML或CSS,我们无法真正帮助您,但通常可以使用以下属性实现此行为:background-size: cover

background-image: url('URLGOESHERE');
    height: ???;
    background-size: cover;

只要您指定显式高度(像素)并执行指定宽度,此属性就会导致背景图像调整大小,同时保持宽高比。

JSFiddle示例。