允许背景图片展开

Question

I want to give a container a background image, which is basically a white image, with a fancy border on its left and right side. It is only a few pixels high so gets repeated on the y-axis.

However, the image is a set width, so cannot expand/contract on the x-axis. Is there a way of maybe giving the container 3 background images - 1 for the left border, 1 for the right and 1 for the centre?

That way I can repeat the centre background image and sandwich it between the side background images.

Answer 1

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

Answer 2

I had two images and did it with that you can add another one 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;
}

Answer 3

可能有很多方法可以执行此操作，但是此链接显示了具有扩展背景图像的非常简单的方法：

background-size: 100% auto;