带有顶部和底部填充的css拉伸背景图像_Css_Background Image_Margin_Padding

带有顶部和底部填充的css拉伸背景图像

css

带有顶部和底部填充的css拉伸背景图像,css,background-image,margin,padding,Css,Background Image,Margin,Padding,我想为一个页面的背景图像拉伸到全宽和全高。这里的挑战是，它应该在顶部和底部留出一个48像素的区域（这些是页眉和页脚区域，我们不希望这个图像隐藏在后面）。另外，我尝试只使用css（没有javascript或客户端代码）。CSS3还可以到目前为止，我就在这里。我已经能够获得最高利润： background-image: url('images/image1.png') background-repeat: no-repeat; background-attachment:fixed; backg

我想为一个页面的背景图像拉伸到全宽和全高。这里的挑战是，它应该在顶部和底部留出一个48像素的区域（这些是页眉和页脚区域，我们不希望这个图像隐藏在后面）。另外，我尝试只使用css（没有javascript或客户端代码）。CSS3还可以

到目前为止，我就在这里。我已经能够获得最高利润：

 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;

我不使用背景大小，而是制作一个包含图像的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>

我的做法略有不同——我会将三个

堆叠在一起，中间的一个按照您的要求应用背景图像。这样，您可以将第一个和第三个

的高度设为48px，或者任意高度。

您可以将页眉和页脚都包装在包装器div上，包装器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 )

瞧。

谢谢你。你的回答正好适合我，因为我的页眉和页脚已经有了更高的z索引。我猜走img路线是比较容易的解决办法。仍然想知道我们是否可以将底部填充或边距应用于背景图像。

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