允許背景圖像展開

我想給一個容器一個背景圖像，它基本上是一個白色圖像，在其左側和右側有一個花哨的邊框。它只有幾個像素高，因此在y軸上重複。允許背景圖像展開

但是，圖像是一個設置寬度，所以不能在x軸上展開/收縮。有沒有辦法讓容器3的背景圖像 - 左邊界1，右邊1和中心1？

這樣我就可以重複中心背景圖像並將其夾在側面背景圖像之間。

2014-10-09 Jon

我有兩個圖像，並與沒有它，你可以添加另一個http://jsfiddle.net/xksr01v4/

#back{ 
    width: 500px; 
    height: 250px; 
    background-image: url(http://placekitten.com/300/301), 
url(http://static.comicvine.com/uploads/original/11112/111123678/3503035-3468468-2718720139- batma.jpg); 
    background-position: left, right; 
    background-repeat: no-repeat; 
}

來源

2014-10-09 10:32:35 Akshay

如果我需要沿着y軸和x軸和y軸重複沿y軸和中間圖像的側面圖像怎麼辦？ – Jon 2014-10-09 10:36:01

試試這個背景重複：repeat-y，repeat，repeat-y; – Akshay 2014-10-09 16:03:53

#container{ 
background-image: url(image1.png), url(image2.png), url(image3.png); 
background-position: left top, right top, center top; 
}

來源

2014-10-09 10:27:08 Nick

可能有許多方法可以做到這一點，但this link顯示具有擴大的背景非常簡單的方法圖片：

background-size: 100% auto;

來源

2014-10-09 12:30:16 Jon

允許背景圖像展開

回答

相關問題