我想创建
一个固定宽度的布局,其中
页面两侧的背景颜色不同,但无论您缩小多远,背景颜色都会从
页面的任一侧无限延伸.
例如,我不打算创建一个9000×10像素的图像,并在两侧使用正确的颜色并将其平铺,因为只有在缩小到足以看不到背景图像的边缘时这才会起作用.
这可能吗?
谢谢!
编辑:
我应该指定,背景应该覆盖页面的整个高度,而不仅仅是窗口/视口的高度.
This似乎工作:
<body>
<div id="bg-right"></div>
<!-- rest of page -->
</body>
body {
background-color: purple;
}
#bg-right {
background-color: yellow;
position: fixed;
top: 0;
bottom: 0;
left: 50%;
right: 0;
z-index: -1;
}