logo标签列表

如何将背景图片拉伸以覆盖整个HTML元素？

htmlcssbackground-image
99

我正在尝试将 HTML 元素（body、div 等）的背景图像拉伸到其整个宽度和高度。

没有太多运气。这是否可能，还是我必须以背景图像之外的其他方式完成它？

我的当前 CSS 代码为：

body {
    background-position: left top;
    background-image: url(_images/home.jpg);
    background-repeat: no-repeat;
}

编辑：我不想维护Gabriel建议中的CSS，所以我改变了页面的布局。但那似乎是最好的答案，所以我标记它为这样。

当然，你可以使用JavaScript来动态完成，但这可能比gabriel1836链接所建议的CSS hacks还要糟糕。 - Jason Bunting
为了保留图像的纵横比，您应该使用"background-size：cover;"或"background-size：contain;"。我已经编写了一个在IE8中实现这些值的polyfill：http://github.com/louisremi/background-size-polyfill - Louis-Rémi
14个回答
212
<style>
    { margin: 0; padding: 0; }

    html { 
        background: url('images/yourimage.jpg') no-repeat center center fixed; 
        -webkit-background-size: cover;
        -moz-background-size: cover;
        -o-background-size: cover;
        background-size: cover;
    }
</style>
3
这是有史以来最好的解决方案。 - Andrei Drynov
1
盖 vs 100% 100% 有什么区别？ - Pacerier
4
100%不会保持原始图像的纵横比。 "cover"会缩放图像并保留其本来的纵横比（如果有的话），以使其宽度和高度都完全覆盖背景定位区域，并且尺寸最小。您也可以使用“contain”来缩放图像并保留其本来的纵横比（如果有的话），以使其宽度和高度都适合背景定位区域内，且尺寸最大。 - Mike737
background-size 属性在 IE9+、Firefox 4+、Opera、Chrome 和 Safari 5+ 中得到支持，因此浏览器前缀是不必要的。http://www.w3schools.com/cssref/css3_pr_background-size.asp - Duke
更详细的支持浏览器列表请参见：http://caniuse.com/#search=background-size，同时请查看IE 7-8 polyfill：https://github.com/louisremi/background-size-polyfill。 - user133408
显示剩余7条评论
15
1
太棒了，这是正确的答案。它可能在IE上不起作用，但我只针对我的项目使用webkit，所以这很完美 :) - aehlke
9
简而言之，您可以尝试这个......
<div data-role="page" style="background:url('backgrnd.png'); background-repeat: no-repeat; background-size: 100% 100%;" >

我在这里使用了少量的CSS和JS...

<link rel="stylesheet" href="css/jquery.mobile-1.0.1.min.css" />
<script src="js/jquery-1.7.1.min.js"></script>
<script src="js/jquery.mobile-1.0.1.min.js"></script>

而且对我来说它很好用。

对于那些不想保持纵横比的人！ - BillyNair
6

进一步解释@PhiLho的回答，您可以使用以下代码将非常大的图像（或任何大小的图像）居中于页面：

{ 
background-image: url(_images/home.jpg);
background-repeat:no-repeat;
background-position:center; 
}

或者你可以使用一个背景色与图像背景相匹配（如果是纯色）的较小的图像。这可能适合您的用途，也可能不适合。

{ 
background-color: green;
background-image: url(_images/home.jpg);
background-repeat:no-repeat;
background-position:center; 
}
6

不确定是否可以拉伸背景图片。如果您发现在所有目标浏览器中无法实现或不可靠，您可以尝试使用拉伸的img标签，并将z-index设置为较低，并将位置设置为absolute，以便其他内容位于其上方。

请告诉我们你最终采取了什么措施。

编辑：我建议的基本上就是Gabriel链接中的内容。所以试试那个 :)

1
我至少十年前就看到过这种技术的应用。我无法想象它现在不起作用。 - eyelidlessness
5
如果您需要在调整屏幕大小时拉伸背景图像，并且不需要与旧浏览器版本兼容，以下内容可以实现：
body {
    background-image: url('../images/image.jpg');
    background-repeat: no-repeat;
    background-size: cover;
}
3

如果您有一张大的横向图片，这个例子会将背景调整为纵向模式，使其顶部显示，底部留白：

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

body {
    background-image: url('myimage.jpg');
    background-position-x: center;
    background-position-y: bottom;
    background-repeat: no-repeat;
    background-attachment: scroll;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
}

@media screen and (orientation:portrait) {
    body {
        background-position-y: top;
        -webkit-background-size: contain;
        -moz-background-size: contain;
        -o-background-size: contain;
        background-size: contain;
    }
}
3
我通常使用以下代码来实现所需的效果:
body {
    background-image: url('../images/bg.jpg');
    background-repeat: no-repeat;
    background-size: 100%;
}
4
你需要使用background-size: 100% 100%;。 - Sablefoste
我不知道你使用的是什么浏览器，但是我所说的在Firefox和Chrome中对我有效。 - Badar
2
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;
2

它对我有效

.page-bg {
  background: url("res://background");
  background-position: center center;
  background-repeat: no-repeat;
  background-size: 100% 100%;
}
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接