切割此背景图像以实现最佳CSS实现？

Question

切片此背景图片以获得最佳CSS实现的最佳方法是什么？设计师不知道CSS，因为我们不是CSS专家，我们不确定切片背景图像的最佳方法。当然，背景应该是流畅的，并且可以扩展到不同的显示器尺寸和页面长度。同时，拥有一个大图像或多个小图像似乎不太理想。

我们不需要支持IE6。

有什么建议吗？

Answer 1

通过切片，我不能100％确定你想要什么。我假设您正在寻找一种方法来尽可能多地拉伸Facebook部分，同时仍然保持背景图像正常。

对于大多数非手机（即桌面或平板电脑）屏幕，您可以在最后一个云下方切割并垂直重复蓝天背景。使用CSS属性background-repeat：http://www.w3schools.com/cssref/pr_background-repeat.asp 你有3个带余量的div：0：

• hmm panabee（实际内容）div，背景图像是气球，居中。您希望它的高度大于图像的高度。如果你想强制执行它，那就是最小高度。这张图片的底部应该是蓝天。

如果你使用蓝天图像的背景重复，

• facebook div可以大到你想要的那么大。

• 和页脚div，带有您选择的背景图片，但图片顶部应为蓝天。

我认为所有这些（除了最小高度，可能？）应该适用于大多数浏览器，甚至是IE6。

Answer 2

CSS3支持multiple overlapping background images（您希望它们是透明的PNG或类似的），以及允许您适应不同窗口大小的background-size属性。在我看来，这将完全解决你的问题。

检查here以查看某项功能是否得到广泛支持，足以让目标受众使用。