垂直半頁背景圖像（在Squarespace中）

我正在尋找實現如下所示的半頁背景圖像：www.washiarts.com。我使用Squarespace構建網站，因爲我是網頁設計新手......請善待。垂直半頁背景圖像（在Squarespace中）

我知道我需要使用一個容器，然後在那裏有圖像，儘管我正在努力在Squarespace中使用代碼輸入的選項來完成它。我可以將圖像，並使用這些代碼的變化正確對齊，但它顯得捉襟見肘：

> body { 
    background-image: url("IMAGE URL"); 
    background-position: 0; 
    background-size: 50% 100%; 
    background-repeat: no-repeat; 
}

感謝您的任何幫助。

來源

2016-09-29 Nick D

閱讀此，它會幫助！ https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Background_and_Borders/Scaling_background_images – Goombah

感謝您的建議！ –

我覺得很難不讓它伸展。 Washiarts.com的bg-image也略微伸展。他們使用background-size: cover;

如何使一個可重複的模式，並使其重複向下？

body { 
    background-image: url("http://i285.photobucket.com/albums/ll53/ellee2012/Cute/0-75.png~original"); 
    background-size: 50%; 
    background-repeat: repeat-y; 
}

來源

2016-09-29 11:36:19 Emil

謝謝！這幾乎是完美的 - 它只是在底部略微重複。我希望能夠使用一個大圖像而不是模式（對不起，我沒有詳細說明）。無論如何只是略去了輕微的重複？ –

我編輯了我的原始圖像，並刪除了重複。我仍然很想知道如何將它添加到容器中，但我有一個可行的解決方案。謝謝！ –

如果您不希望重複使用'background-repeat：no-repeat;'但請注意，對於屏幕分辨率高於其他屏幕分辨率的其他人，圖像太小。 – Emil

垂直半頁背景圖像（在Squarespace中）

回答

相關問題