如何获得背景颜色以缩放到窗口大小？(how to get a background color to scale to window size?)

如何获得背景颜色以缩放到窗口大小？(how to get a background color to scale to window size?)

我的CSS页面上有一个渐变背景颜色。 我已尝试过多种带有填充和边距的配置，但没有成功获得不同尺寸屏幕的颜色。 它不是顶部，左侧或右侧的问题，只有底部。 为了快速修复，我将身体的底部填充设置为10％。 我宁愿这样做，以便背景颜色缩放以适合窗口大小。 提前致谢！ 这是一个页面的链接，它实际上只发生在IE或完整的窗口。 http://jstrobel.sheridan-college.com/index.html

body { background: -webkit-gradient(linear, top, bottom, from(#003399), to(#6699cc)); background: -webkit-linear-gradient(#003399, #6699cc); background: -moz-linear-gradient(#003399, #6699cc); background: -ms-linear-gradient(#003399, #6699cc); background: -o-linear-gradient(#003399, #6699cc); background: linear-gradient(#003399, #6699cc); filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#003399', endColorstr='#6699cc'); zoom: 1; margin: 0; padding-top: 2%; padding-bottom: 3%; } #wrapper { margin: auto; width: 1060px; min-width: 1060px; -webkit-box-shadow: 5px 5px 5px #1e1e1e; -moz-box-shadow: 5px 5px 5px #1e1e1e; -ms-box-shadow: 5px 5px 5px #1e1e1e; -o-box-shadow: 5px 5px 5px #1e1e1e; box-shadow: 5px 5px 5px #1e1e1e; } #container { background: #ffeeee; background: -webkit-gradient(linear, top, bottom, from(#ffeeee), to(#6699cc)); background: -webkit-linear-gradient(#ffeeee, #6699cc); background: -moz-linear-gradient(top, #ffeeee, #6699cc); background: -ms-linear-gradient(#ffeeee, #6699cc); background: -o-linear-gradient(#ffeeee, #6699cc); background: linear-gradient(#ffeeee, #6699cc); filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffeeee', endColorstr='#6699cc'); zoom: 1; min-width: 1060px; font-family: Verdana, Arial, sans-serif

I have a gradient background color in the body on my CSS page. I have tried numerous configurations with padding and margin with no success to get the color to scale for different size screens. It is not an issue for the top, left or right, only with the bottom. For a quick fix I had the bottom padding of the body set to 10%. I would rather make it so that the background color scales to fit window sizes. Thanks in advance! here is a link to the page, it really only happens in IE, or a full window. http://jstrobel.sheridan-college.com/index.html

body { background: -webkit-gradient(linear, top, bottom, from(#003399), to(#6699cc)); background: -webkit-linear-gradient(#003399, #6699cc); background: -moz-linear-gradient(#003399, #6699cc); background: -ms-linear-gradient(#003399, #6699cc); background: -o-linear-gradient(#003399, #6699cc); background: linear-gradient(#003399, #6699cc); filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#003399', endColorstr='#6699cc'); zoom: 1; margin: 0; padding-top: 2%; padding-bottom: 3%; } #wrapper { margin: auto; width: 1060px; min-width: 1060px; -webkit-box-shadow: 5px 5px 5px #1e1e1e; -moz-box-shadow: 5px 5px 5px #1e1e1e; -ms-box-shadow: 5px 5px 5px #1e1e1e; -o-box-shadow: 5px 5px 5px #1e1e1e; box-shadow: 5px 5px 5px #1e1e1e; } #container { background: #ffeeee; background: -webkit-gradient(linear, top, bottom, from(#ffeeee), to(#6699cc)); background: -webkit-linear-gradient(#ffeeee, #6699cc); background: -moz-linear-gradient(top, #ffeeee, #6699cc); background: -ms-linear-gradient(#ffeeee, #6699cc); background: -o-linear-gradient(#ffeeee, #6699cc); background: linear-gradient(#ffeeee, #6699cc); filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffeeee', endColorstr='#6699cc'); zoom: 1; min-width: 1060px; font-family: Verdana, Arial, sans-serif

最满意答案

添加： background-attachment: fixed; 到你的身体。

解决方案是：

html { background: -webkit-gradient(linear, top, bottom, from(#003399), to(#6699cc)); background: -webkit-linear-gradient(#003399, #6699cc); background: -moz-linear-gradient(#003399, #6699cc); background: -ms-linear-gradient(#003399, #6699cc); background: -o-linear-gradient(#003399, #6699cc); background: linear-gradient(#003399, #6699cc); filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#003399', endColorstr='#6699cc'); }

---

body { background: -webkit-gradient(linear, top, bottom, from(#003399), to(#6699cc)); background: -webkit-linear-gradient(#003399, #6699cc); background: -moz-linear-gradient(#003399, #6699cc); background: -ms-linear-gradient(#003399, #6699cc); background: -o-linear-gradient(#003399, #6699cc); background: linear-gradient(#003399, #6699cc); filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#003399', endColorstr='#6699cc'); zoom: 1; margin: 0; padding-top: 2%; padding-bottom: 3%; background-attachment: fixed; } #wrapper { margin: auto; width: 1060px; min-width: 1060px; -webkit-box-shadow: 5px 5px 5px #1e1e1e; -moz-box-shadow: 5px 5px 5px #1e1e1e; -ms-box-shadow: 5px 5px 5px #1e1e1e; -o-box-shadow: 5px 5px 5px #1e1e1e; box-shadow: 5px 5px 5px #1e1e1e; } #container { background: #ffeeee; background: -webkit-gradient(linear, top, bottom, from(#ffeeee), to(#6699cc)); background: -webkit-linear-gradient(#ffeeee, #6699cc); background: -moz-linear-gradient(top, #ffeeee, #6699cc); background: -ms-linear-gradient(#ffeeee, #6699cc); background: -o-linear-gradient(#ffeeee, #6699cc); background: linear-gradient(#ffeeee, #6699cc); filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffeeee', endColorstr='#6699cc'); zoom: 1; min-width: 1060px; font-family: Verdana, Arial, sans-serif; }

编辑：并添加：

html, body { height: 100%; }

演示：

Add: background-attachment: fixed; to your body.

The solution is:

html { background: -webkit-gradient(linear, top, bottom, from(#003399), to(#6699cc)); background: -webkit-linear-gradient(#003399, #6699cc); background: -moz-linear-gradient(#003399, #6699cc); background: -ms-linear-gradient(#003399, #6699cc); background: -o-linear-gradient(#003399, #6699cc); background: linear-gradient(#003399, #6699cc); filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#003399', endColorstr='#6699cc'); }

---

body { background: -webkit-gradient(linear, top, bottom, from(#003399), to(#6699cc)); background: -webkit-linear-gradient(#003399, #6699cc); background: -moz-linear-gradient(#003399, #6699cc); background: -ms-linear-gradient(#003399, #6699cc); background: -o-linear-gradient(#003399, #6699cc); background: linear-gradient(#003399, #6699cc); filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#003399', endColorstr='#6699cc'); zoom: 1; margin: 0; padding-top: 2%; padding-bottom: 3%; background-attachment: fixed; } #wrapper { margin: auto; width: 1060px; min-width: 1060px; -webkit-box-shadow: 5px 5px 5px #1e1e1e; -moz-box-shadow: 5px 5px 5px #1e1e1e; -ms-box-shadow: 5px 5px 5px #1e1e1e; -o-box-shadow: 5px 5px 5px #1e1e1e; box-shadow: 5px 5px 5px #1e1e1e; } #container { background: #ffeeee; background: -webkit-gradient(linear, top, bottom, from(#ffeeee), to(#6699cc)); background: -webkit-linear-gradient(#ffeeee, #6699cc); background: -moz-linear-gradient(top, #ffeeee, #6699cc); background: -ms-linear-gradient(#ffeeee, #6699cc); background: -o-linear-gradient(#ffeeee, #6699cc); background: linear-gradient(#ffeeee, #6699cc); filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffeeee', endColorstr='#6699cc'); zoom: 1; min-width: 1060px; font-family: Verdana, Arial, sans-serif; }

Edit: And add:

html, body { height: 100%; }

Demo: