背景圖以拉伸方式（不重復）填充背景

今天要解決一個用背景圖以拉伸方式（不重復）填充背景的問題。

看了《用CSS把背景圖片拉伸》和《css 如何讓背景圖片拉伸填充避免重復顯示》后用background-repeat配合background-size解決了底圖不重復的問題。但另一個問題來了，圖片是按寬度作為比例進行縮放的，如果這張圖是橫向，在手機豎向時，下面一截就空了，如下圖：

再次看《用CSS把背景圖片拉伸》時發現示例中有 background-attachment: fixed; 屬性加上一試，Ok了。 如下圖

 

最終代碼如下：

.background-pic
{
background-image: url(圖片地址);
background-attachment: fixed;
background-repeat: no-repeat;
background-size: cover;
}