2部分CSS"壁纸"调整大小到浏览器

Question

我的设计师认为这不可能做到,但对我来说似乎是可能的.(虽然我的CSS经验有限).但是,他也说过背景无法修复,而且过去的堆栈溢出证明了他的错误; 所以我质疑他的知识.

如果无法在纯CSS中完成此操作,则可以使用JQuery. 替代文字

上半部分是一个渐变,具有完全灵活的左,右,上,下倾斜而没有太多失真.下半部分是理想的1280 x 1024分辨率图像(因为这是最流行的浏览器显示分辨率).然后根据所需的要求,它将绘制和倾斜到它需要的任何尺寸.仍然允许看到所有图像.

上半部分和下半部分之间的比例始终为50%50%,与浏览器分辨率无关.

如果顶部和底部都固定,我也想.

在一个完美的世界(一个没有IE),id喜欢用1个DIV中的css3渐变和多个背景来做到这一点.但是,因为IE9尚未出现,我认为接近它的最佳方式是在DIV容器中使用2个div并使用PNG重复背景作为顶部div.

应该注意我将使用css3pie.com为IE6-8允许一些CSS3(但我不想依赖它,除非100%证明)

这只能用CSS吗？你会怎么做？

如果只用CSS不可能,有没有办法让JavaScript/JQuery帮助？我认为1280 x 1024的基础不是最好的主意,因为它似乎有一个奇怪的无线电.

Edit 1

它在1280 x 1024看起来不错......现在它只是将顶级DIV的整个大小调整为50%,因此图像为50%.

我仍然喜欢看到所有的水,因为我喜欢底部岩石的外观.但是,我愿意接受那些没有达到我想要的100%的替代想法,而是接近.

Edit 2

如何使用顶部渐变作为真正的CSS2背景,然后只是<img>在其底部放置一个调整大小？也许这将允许CSS2能力.我在这里引用一些解决方法:列表分开

Edit 3

我仍然在寻找可以在IE6上运行的结果,也不会导致Internet Explorer停滞不前.我正在设置50的奖金,以帮助吸引更多的关注.

Answer 1

我成功地想出了两种方法:

方法1

点击此处查看演示

使用CSS3 background-size我能够将2个div元素设置在彼此之上,min-height: 50%然后使用background-size: 100% 50%它们成功完成我正在寻找的东西.

这个方法只是一个概念证明,因为IE6-8不支持background-size,我没有完全调整这个方法.就目前而言,当你滚动尽管有它时,它目前会混乱background-attachment: fixed;.我放弃了这个CSS3方法,以便使用CSS技巧寻找更好的方法......

方法2

点击此处查看演示

以下是我从A List Apart(文章 | 例1 | 例2)中找到的例子.我使用了示例1中的技术#2,并且我能够使用CSS2模拟我想要做的事情.(我不是100%确定这是如何或为什么这样,但确实如此)

因为我也打算使用CSS3PIE给IE6-8 CSS3做的能力linear gradients,border-radius以及box-shadow; 我选择使用线性渐变而不是顶部背景的图像.

问题