하나의 요소에 여러 이미지의 상단과 하단 css3? 워드 프레스에서

Question

나는 내 기본 메뉴 구조의이 종류가 있습니다

#menu-primary .sub-menu {  
    background:url('images/submenu_background_top.png') no-repeat 0 0; 
    width:159px; 
    padding-bottom:6px;  
} 

이미지 submenu_background_top.png는 상향 링크입니다 .submenu - 요소의 상단에 있습니다.

는 I는 .submenu의 위쪽에 다른 배경 맞추려 - 소자 (따라서 (고 6 픽셀이다 를 padding-bottom:6px)) "정상적인 경우는"나는에서 absoletely 위치 요소에 넣어 수에

하위 메뉴 .submenu 요소의 하단에 이미지를 넣고,하지만 내가 사용하는 테마의 기본 메뉴()에 대한 HTML을 변경하고 싶지 않아요.

나는 CSS3 여러 이미지 보았다,하지만 난 쉼표 (,)로 구분 권리, 메인, 왼쪽 - 이미지를 사용할 수 이해, 을 오히려 topimage처럼 나는 것, bottomimage는 쉼표 (,)로 구분 - 나는 할 수 없었다 css3에서이를 달성 할 수있는 능력을보십시오. 이미지 폴백을 만드는 것이 쉽기 때문에 css3을 사용하는 데 문제가 없습니다.

#menu-primary .sub-menu {  
    background:url('images/submenu_background_top.png') no-repeat 0 0; 
    width:159px; 
    /* How to put a bottom image here that is 6px high? (but still have image above in this element) */ 
    padding-bottom:6px;  
} 

Answer 1

당신이이 쉼표로 분리 같이, 서로 다른 이미지에 대한 귀하의 배경 값 :

background-image: url('images/submenu_background_top.png'), url('images/submenu_background_bottom.png'); 
background-position: top left, bottom left; 
background-repeat: no-repeat; 

JSFiddle : http://jsfiddle.net/Z5c8n/