CSS irregular background image centered in navigation

In the production of CSS navigation, there is a problem, the previous navigation is left and right symmetry, as long as the use of margin:0 auto, you can achieve the center. But this time the picture template navigation of the left width, the right narrow, if all as the background to layout, a glance will feel that the navigation is not in the middle.

In order to have its visual logo and the white area of the navigation menu centered, it is necessary to use relative positioning and absolute positioning.

Left-side.pngright-side.png

The code for HTML is as follows:

<DivID= "MSG">         <Divclass= "Left-side"></Div>         <Divclass= "Right-side"></Div>... </Div><!--msg End -

The CSS code is as follows:

#msg{float: Left;width:100%;Height:130px;Margin-left:-18px;/*changes relative to the original position*/position:relative;Background-color:#fff;}. Left-side{position:Absolute;/*changes relative to the parent, which is msg at the parent level*/ Left:-90px;Background-image:URL (images/left-side.png);background-repeat:no-repeat;width:90px;Height:130px;}. Right-side{position:Absolute; Right:-70px;Background-image:URL (images/right-side.png);background-repeat:no-repeat;width:70px;Height:130px;}

CSS irregular background image centered in navigation