Question

你好，我在使用背景图片方面遇到了问题。

网站的结构如下：

标题包含两种颜色，固定高度为100px。主机应包含具有可变高度的切片图像。页脚包含一种颜色，并且固定高度为100px。

因此，我的切片图像的高度为550像素，并且在内容不会更大的情况下，将恰好适合页眉和页脚。

<html>
<body>
    <div class="wrapper">

        <div id="header">header</div>

        <div id="mainframe">INSIDE HERE SHOULD BE PLACED THE SLICED IMAGE BUT THE CONTENT IS MORE THAN 550PX</div>

        <div class="push"></div><!--Push for sticky footer-->

</div><!--Wrapper -->

    <div class="footer">footer</div>
</body>

example

现在问题是，我的内容将大于550px，并且由于颜色渐渐变暗，会有一个硬的edgde，你可以看到图像的结束位置。所以我认为当切片的背景图像可以自动调整大小时会很好。

有没有办法通过使用css来实现？

非常感谢。

Answer 1

简短回答：遗憾的是，没有办法用CSS调整背景图片的大小。

通常，使用background-repeat有一个聪明的解决方法：repeat-x;或者背景重复：repeat-y;属性，并使用仔细切片的背景图像。

如果您有图像示例，我可以提供更多帮助。

Answer 2

尝试

background-size: 100% Auto;

Answer 3

你可以尝试

background-size:cover;

自动调整背景图像的大小

3 个答案: