Как растянуть отдельные фоновые изображения в CSS

Question

background: url(timages/wb-right.png) 100% 0 no-repeat, url(timages/wb-left.png) 0 0 no-repeat, url(timages/wb-top.png) 0 0 no-repeat, url(timages/wb-bottom.png) 0 80px no-repeat; 

В настоящее время этот код содержит 4 изображения для фона. Для каждой стороны есть одна. Левый верхний правый снизу.

Единственная проблема заключается в том, что изображения сверху и снизу не растягиваются и не повторяют полную ширину окна. Возможно ли это сделать. Если я установил любой из повторений, чтобы повторить, он заполняет весь фон.

Любые советы полезны

Answer 1

Вы ищете что-то вроде этого:

Демо: http://jsfiddle.net/abhitalks/dgcfK/

background-image: url(timages/wb-top.png), 
    url(timages/wb-left.png), 
    url(timages/wb-right.png), 
    url(timages/wb-bottom.png); 
background-position: left top, left bottom, top right, bottom right; 
background-repeat: repeat-x, repeat-y, repeat-y, repeat-x;