当响应网站上的背景图片不适合屏幕尺寸变化
如何获取响应式网站的背景以适应网页上的其他内容并随其移动?当响应网站上的背景图片不适合屏幕尺寸变化
我的背景被分割并不能覆盖整个背景,只能部分地产生一种效果,其中每一面都是不同的颜色(灰色)。
但是,当我改变屏幕的大小时,所有的元素将被移动,背景将不会像最初一样被定位。
我该如何去确保无论窗口的大小是多少,“灰色条”总能适合主要内容?
如果你看一下这张图,这是应该的样子:
而且这里是背景图像中的文字以及现场包装:
.gray {background:url(http://frenchegg.com/images/gray.png) no-repeat; height:100%;}
.lgr {background-size:85% 100%; background-position:center;}
.main-content p {
color:#555;
}
.site-wrap {
position:relative;
min-height:100%;
background-color:#ebebeb;
}
您可以找到网站here.
好吧,你页面可能需要一些调整,但我相信我有一个解决方案 为你。
最初,主要问题源于背景大小被设置为百分比宽度(注意背景大小是css3属性,并没有完全支持...但多数民众赞成在另一个问题)。
对于概念的证明,并给你看你将不得不改变什么,尝试以下操作:
- 在“灰色”(Styles.css中线路1880) 移除背景
-
上线230应用内联的规则来 '行'(NOT TO ROW规则)在源,所以它看起来像这样:
<div class="main-content"> <div class="row" style=" padding: 65px; background: url(http://frenchegg.com/images/gray.png) no-repeat; background-size: 85% 100%; background-position: center;">
复制目的的规则如下。
padding: 65px;
background: url(http://frenchegg.com/images/gray.png) no-repeat;
background-size: 85% 100%;
background-position: center;
请注意填充有点棘手,但它只是为了向您显示您的背景需要正确响应的位置。
干杯队友,
GW
哦对!你真棒!!谢谢!但是我不太清楚如何使它覆盖上部和下部。你有任何线索吗? – 2013-04-29 12:32:06
你是什么意思队友?你现在的改变看起来不错?!还有什么我可以帮忙的吗? – 2013-04-29 12:53:14
哦,我找到了一种方法! :) 非常感谢你的帮助! – 2013-04-29 13:00:34
我检查的链接。它已经按照你的意愿工作了! – Sharun 2013-04-29 10:28:57
您是否尝试更改窗口大小?您将看到元素如何从背景的白色部分跳出。 – 2013-04-29 10:31:51