當響應網站上的背景圖片不適合屏幕尺寸變化

如何獲取響應式網站的背景以適應網頁上的其他內容並隨其移動？當響應網站上的背景圖片不適合屏幕尺寸變化

我的背景被分割並不能覆蓋整個背景，只能部分地產生一種效果，其中每一面都是不同的顏色（灰色）。

但是，當我改變屏幕的大小時，所有的元素將被移動，背景將不會像最初一樣被定位。

我該如何去確保無論窗口的大小是多少，「灰色條」總能適合主要內容？

如果你看一下這張圖，這是應該的樣子：

而且這裏是背景圖像中的文字以及現場包裝：

.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

當響應網站上的背景圖片不適合屏幕尺寸變化

回答

相關問題