如何將背景圖像重復為塊

Question

是否可以將背景圖像重復為塊？ 當我將div設為100％寬度並將高度設置為70px時，此圖像重復良好，但問題取決於盒子的寬度，有時一半的項目顯示出來並且沒有任何意義。 我希望整個圖像重復，如果有空間，如果沒有重復應該結束。 可能嗎？

 #wrapper { background-color: #E3E3E3; position: relative; padding: 55px 0 0 0; } #notepadTop { display: block; position: absolute; top: -24px; left: 0; width: 100%; height: 70px; background: url('http://i.imgur.com/lbW0QX6.png') repeat; } 

 <div id="wrapper"> <div id="notepadTop"> </div> </div> 

這是圖像

Answer 1

嘗試在你的CSS中添加：

background-repeat: round

所以你有了：

#notepadTop {
  display: block;
  position: absolute;
  top: -24px;
  left: 0;
  width: 100%;
  height: 70px;
  background-image: url('http://i.imgur.com/lbW0QX6.png');
  background-repeat: round;
}

值round是一個新的CSS3選項，所以這不適用於IE8及以下（你不應該擔心它）。

Answer 2

如果我理解你的問題，你正在尋找background-size: cover;