当响应网站上的背景图片不适合屏幕尺寸变化

如何获取响应式网站的背景以适应网页上的其他内容并随其移动？当响应网站上的背景图片不适合屏幕尺寸变化

我的背景被分割并不能覆盖整个背景，只能部分地产生一种效果，其中每一面都是不同的颜色（灰色）。

但是，当我改变屏幕的大小时，所有的元素将被移动，背景将不会像最初一样被定位。

我该如何去确保无论窗口的大小是多少，“灰色条”总能适合主要内容？

如果你看一下这张图，这是应该的样子：

而且这里是背景图像中的文字以及现场包装：

.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.

website

来源

2013-04-29 Robert Miller

我检查的链接。它已经按照你的意愿工作了！ – Sharun 2013-04-29 10:28:57

您是否尝试更改窗口大小？您将看到元素如何从背景的白色部分跳出。 – 2013-04-29 10:31:51

好吧，你页面可能需要一些调整，但我相信我有一个解决方案为你。

最初，主要问题源于背景大小被设置为百分比宽度（注意背景大小是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;

请注意填充有点棘手，但它只是为了向您显示您的背景需要正确响应的位置。

干杯队友，

来源

2013-04-29 11:33:16

哦对！你真棒！！谢谢！但是我不太清楚如何使它覆盖上部和下部。你有任何线索吗？ – 2013-04-29 12:32:06

你是什么意思队友？你现在的改变看起来不错？！还有什么我可以帮忙的吗？ – 2013-04-29 12:53:14

哦，我找到了一种方法！：）非常感谢你的帮助！ – 2013-04-29 13:00:34

当响应网站上的背景图片不适合屏幕尺寸变化

回答

相关问题