Multiple background images in CSS

This example will show how to make multiple backgrounds for one div. It is perfect for headers and menus and it contains 3 parts ( left, middle, right ).

.box-header{background-image: url(images/left-orange.png),url(images/right-orange.png);background-repeat: no-repeat,no-repeat;background-position: 0% 0%, 100% 0%;height: 25px;line-height: 23px; text-align:center; width: 99%;margin-bottom: -14px;    position: relative; font-size: 15px; font-weight:bold; margin-top: 20px;}
.box-header::after{background-image: url(images/orange-mid.png); background-repeat: repeat-x;  display:block; width: 91.5%; content:""; height: 24px; margin-top: -23px; margin-left: 14px;}

Leave a Reply

Your email address will not be published. Required fields are marked *