Question

I create Any div in auto width with single image background. in act this worked but There is a small problem. end of right images not overlapped.

HTML :

<div class="home"><span><em>40</em></span></div>

CSS :

.home{
            border:none;
            background:none;
            padding:0;
            margin:0;
            width:auto;
               overflow:visible;                    
            text-align:center;    
            white-space:nowrap;    
            height:40px;
            line-height:34px;   display:inline-block;        
            }
        .home span, .home em{
            display:inline-block;
            height:40px;
            line-height:34px;            
            margin:0;
            color:#954b05;
            }    
        .home span{
            padding-left:15px;
            background:url(http://www.uploadup.com/di-GRW2.png) no-repeat 0 0;
            }    
        .home em{
            font-style:normal;
            padding-right:20px;
            background:url(http://www.uploadup.com/di-GRW2.png) no-repeat 100% 0;}

See E.X In Action : HERE
My Problem : HERE

Answer 1

It’s doing that because the corners of your PNG are transparent. Either make them white (same as background) or use another method. Most modern browsers allow you to do rounded borders via CSS now (with the exception of IE).