調整窗口大小時重複背景圖像

我想創建一個具有背景圖像的頁面，在header和footer之間可以在任何屏幕大小上工作。調整窗口大小時重複背景圖像

我設法創建了頁面，並且它在桌面屏幕上工作正常。我遇到的問題是當我調整到mobile size screen，然後重複背景。

這裏是我的代碼：

div { 
    width: 100%; 
    height: 5886px; 
    background-image: url('services-yellow.jpg'); 
    background-size: 100% auto; 
    background-repeat: none; 
    border: none; 
}

設立在特定高度的高度屬性，但我不知道我怎麼可以改變這種做法，它適用於所有的屏幕尺寸。

該網站可瀏覽：http://s116169771.websitehome.co.uk/testsite/

如果有人能請告知我怎麼能解決這個問題，將不勝感激。

在此先感謝。

來源

2016-08-09 user3191160

none對於background-repeat不是有效值，請改爲使用no-repeat。

背景重複屬性（MDN）（W3Schools）

來源

2016-08-09 07:16:01 Error404

變化background-repeat: none;到background-repeat: no-repeat;none不是background-repeat屬性的有效值。

你的代碼應該是：

div { 
    width: 100%; 
    height: 5886px; 
    background-image: url('services-yellow.jpg'); 
    background-size: 100% auto; 
    background-repeat: no-repeat; 
    border: none; 
}

您還可以使用速記CSS background屬性，如下所示：

div { 
    width: 100%; 
    height: 5886px; 
    background: url('services-yellow.jpg') no-repeat 100% auto; 
    border: none; 
}

More Details

來源

2016-08-09 07:16:10

謝謝你們，真的很感謝所有的答案。順便說一句，減少高度，因爲現在我在底部有一個很大的空白。我需要添加一個媒體查詢來控制這個嗎？或者有沒有辦法在相同的代碼中完成它？ – user3191160

@ user3191160更好地在'HTML'中使用'img'。把你的圖像放在'div'裏面，像'div img {display：block;身高：自動;寬度：100％;''從'div'中移除'height'。 –

謝謝你穆罕默德，這工作，但即時猜測這將無法正常工作，如果我要在圖像的頂部添加文字，因爲這將不再在圖像的頂部.. – user3191160

可能值Here is a list爲背景重複，你需要：

background-repeat: no-repeat;

這個屬性並不存在。

來源

2016-08-09 07:17:19 andreas

使用background-repeat:no-repeat

div { 
    width: 100%; 
    height: 5886px; 
    background-image: url('services-yellow.jpg'); 
    background-size: 100% auto; 
    background-repeat: no-repeat; 
    border: none; 
}

或者乾脆短代碼

div { 
    width: 100%; 
    height: 5886px; 
    background: url('services-yellow.jpg') no-repeat 100%; 
    border: none; 
}

來源

2016-08-09 07:17:39

調整窗口大小時重複背景圖像

回答

相關問題