css使用顶部和底部填充来拉伸背景图片

我想让页面的背景图像伸展到全部宽度和高度。这里面临的挑战是它应该在顶部和底部留出一个48像素的区域（这些是页眉和页脚区域，我们不希望这个图像隐藏在那里）。另外，我正在尝试仅使用CSS（无JavaScript或客户端代码）。 CSS3是好的。css使用顶部和底部填充来拉伸背景图片

这是我到目前为止的地方。我已经能够得到顶边距：

background-image: url('images/image1.png') 
background-repeat: no-repeat; 
background-attachment:fixed; 
background-position: center 48px; 
-webkit-background-size: cover; 
-moz-background-size: cover; 
-o-background-size: cover; 
background-size: cover;

来源

2012-07-18 dreamerkumar

而不是使用的背景大小的，我会做一个div它内部的图像，并将其定位绝对的窗口，然后定位你想要的一切相对而言，Z指数更高。 IE的早期版本不支持背景大小的CSS属性，仅支持IE9 +。这是一个很小的例子：

<body> 
    <div class="bg-image"> 
     <img src="images/image-1.png" /> 
    </div> 
    <div class="content"> 
     <p>this is your content</p> 
    </div> 
</body>

那么对于CSS：

.bg-image { 
    position: absolute; 
    width: 100%; 
    height: auto; /*or 100%*/ 
    z-index: 1; 
    padding: 48px 0px; 
} 

.bg-image img { 
    width: 100%; 
    height: 100%; 
} 

.container { 
    position: relative; 
    z-index: 2; 
    top: 0px; 
}

来源

2012-07-18 19:49:39 DOCbrand

谢谢。你的回答正好适合我，因为我已经有了更高的z-index的页眉和页脚。猜猜img路线是更简单的解决方案。仍然怀疑，如果我们可以将底部填充或边距应用于背景图像。 – dreamerkumar 2012-07-19 13:17:55

我会处理这个略有不同 - 我将堆放在彼此的前三名<div> S，与具有背景中间的一个图像适用于你想要的。这样，你可以制作第一个和第三个高度为48px，或任何你想要的高度。

来源

2012-07-18 19:56:42 chipcullen

您可以在其中有一个包装的div包裹都页眉和页脚：

.wrapper{ 
    width:100%; 
    height:48px; 
    background:(use solid color to cover your body background) 
}

它应该是这样的：

<div class="wrapper"> 
<header> 
.. 
.. 
</header> 
</div

同样的事情页脚。

然后确保两个页眉和页脚设置如下：

margin: 0 auto; 
width:980px (whichever is your width)

瞧。

来源

2012-07-18 20:14:15

css使用顶部和底部填充来拉伸背景图片

回答

相关问题