[笔记] 两个图片背景并存

用途

这样的背景设计: 1、花样繁复必须用图片实现; 2、网页不定高; 3、可以拆分为一个不重复的部分和一个重复的部分; 4、或者——题头很宽很绚丽,但在低分辨率的电脑上不会因为不能展示全部题头而出现水平滚动条。 本例中,一个是宽题头背景,一个是 repeat-y 重复的绚丽的背景设计。

实现

html {

background:url(repeat-y-bg.jpg) center -50px repeat-y #560606;

}

body{

background:url(top_bg.jpg) center top no-repeat;

}

注意

在 body 上设置背景色会使 html 上的重复背景图片失效。若需要背景色请设置在 html 上。

兼容性

测了 ie firefox opera 和 chrome。当然第一个是 6 - 9,后三个是最新版,暂时没发现问题。