CSS-在不裁剪的情況下將整個圖像顯示為背景

Question

我正在嘗試使用背景圖片設置div，並在其頂部添加一些文本。 背景圖像需要拉伸視口的整個寬度，而我已經能夠成功做到這一點。 這是我的CSS：

.intro-header {
  padding-top: 50px; 
  padding-bottom: 50px;
  color: #fff;
  background: url(http://) no-repeat center center fixed;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
}

我遇到的問題是它沒有顯示圖像的整個高度。 圖像在頂部和底部被裁剪。 我希望圖像顯示其完整高度，並且用戶需要向下滾動才能在圖像下方看到更多內容。

有沒有一種方法可以顯示完整圖像而又不影響頂部和底部？

謝謝！

Answer 1

固定的和，而不是刪除cover使用contain 。 如果您想要特定的尺寸，盡管我會在CSS中定義一個高度。

Answer 2

您可以使用background-size: auto 100%;

我在小提琴中更新了一個示例，以查看其外觀。

http://jsfiddle.net/4ozmn00t/2/

Answer 3

從后台刪除固定。

url() no-repeat center center

Answer 4

.intro-header {
    padding-top: 50px; 
    padding-bottom: 50px;
    color: #fff;
    background: url(http://);
    background-size: 100% 100%;
}

將background-size的寬度和高度設置為100％將填充div