屏幕上的完整横幅宽度

Question

我有一个使用图像作为背景的横幅。图像的大小为670 * 303。有没有办法将横幅（图像）拉伸到屏幕的整个宽度。

演示时间为http://jsfiddle.net/zhshqzyc/xGQtF/2/

此外，还有额外的颜色（背景颜色：＃808000）

横幅下方，如何删除它？

感谢。

Answer 1

background-size: 100%应该可以解决问题。

此处http://jsfiddle.net/xGQtF/6/

Answer 2

如果是可以重复的渐变或图案，可以使用

background-repeat:repeat-x; 

或者只是将'repeat-x'插入背景css，如

background:url(images/blah.jpeg) repeat-x;

这样你只需要一小部分图像＆gt;更小的图像尺寸＆gt;更快的加载时间。

去掉你可以使用的图像显示的颜色

background-color:transparent;

另外，如果我怀疑你想让横幅从一侧无缝伸展到另一侧，请务必设置身体样式

padding:0px;
width:100%;

并使用

margin:0px;
width:100%;

在包含背景的div上。

虽然它可以伸展到整个宽度而不将主体填充设置为0px，但是如果没有设置，某些浏览器会自动给出主体填充，因此它会抵消那些填充。

如果您使用的是具有弯曲边缘和顶点等的图像，这对您来说不合适，您只需要拉伸它（我个人认为99％的详细图像看起来不太好）您可以使用：

background-size:100%;

希望我帮助=）