body {
	background-image: url(/images/background_header.png), url(/images/background_footer.png);
	background-position: top left, bottom left;
	background-repeat: repeat-x, no-repeat;
	background-size: 1px 196px, 1px 108px;
}

Multiple horizontal background images with transparent png’s

.my_header_menubar_wrapper {
	height: 44px;
	background-image: url(/images/header_menubar_left.png), url(/images/header_menubar_right.png);
	background-position: top left, top right;
	background-repeat: no-repeat, no-repeat;
	background-size: 20px 44px, 21px 44px;
	position: relative;
	z-index: 2;
}

.my_header_menubar_wrapper:before {
    content: '';
    position: absolute;
    z-index: -1;			/* push it to the background */
    left: 20px;				/* Height of the left image */
    top: 0;
    right: 21px;			/* Height of the right image */
    bottom: 0;
    background: url(/images/header_menubar_middle.png) left top repeat-x;
		background-size: 1px 44px;
}

Multiple vertical background images with transparent png’s

Doing this won’t work because the repeat-y will cause the middle image to fill the whole height, no matter where it is positioned initially:

.column_right_background {
	background-image: url(../background_box_top.png) left top no-repeat,
	url(../background_box_bottom.png) left bottom no-repeat,
	url(../background_box_mid.png) 0px 206px repeat-y;
	width: 712px;
}

Solution

A nice solution is to push the repeating background into a pseudo element positioned off of the container:

.column_right_background {
	background: url(../background_box_top.png) left top no-repeat,
	url(../lgimages/background_box_bottom.png) left bottom no-repeat;
	width: 712px;
	position: relative;
	z-index: 2;
}

.column_right_background:before {
    content: '';
    position: absolute;
    z-index: -1;			/* push it to the background */
    top: 206px;				/* Height of the top image */
    right: 0;
    bottom: 25px;			/* Height of the bottom image */
    left: 0;
    background: url(../background_box_mid.png) left top repeat-y;
}