Question

我希望页面的背景图像能够拉伸到整个宽度和高度。这里的挑战是它应该在顶部和底部留下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;

Answer 1

我不是使用背景大小，而是在其中创建一个带有图像的div，并将其绝对定位到窗口，然后将所需的所有内容放在相对的位置，使用更高的z-index。早期版本的IE不支持background-size 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;
}

Answer 2

我的处理方式略有不同 - 我会将三个<div>堆叠在一起，中间的一个按照您的意愿应用背景图像。这样，你可以使第一个和第三个<div>高48px，或任何你想要的高度。

Answer 3

你可以将页眉和页脚都包装在一个包装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 )

瞧。

css拉伸背景图像与顶部和底部填充

3 个答案: