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;
}
USEFUL?
We benefit hugely from resources on the web so we decided we should try and give back some of our knowledge and resources to the community by opening up many of our company’s internal notes and libraries through mini sites like this. We hope you find the site helpful.
Please feel free to comment if you can add help to this page or point out issues and solutions you have found, but please note that we do not provide support on this site. If you need help with a problem please use one of the many online forums.

Comments

Your email address will not be published.