CODEWITHSUNDEEP
htmlcssimageresize
Saimon Avazian
Saimon Avazian

Reputation: 281

resize background in auto width div

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

Upvotes: 0

Views: 344

Answers (2)

Shailender Arora
Shailender Arora

Reputation: 7788

you can make the same curve box as per your image with css3 here is small css for you to make curve box and compatible with all browsers:- 

.box {
border:1px solid #dadada;
width:50px;
height:50px;    
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
behavior: url(border-radius.htc);
}

check the live demo:- http://jsfiddle.net/ZysQa/3/

i have used behavior hack for ie support border radius property so for ie border details you can read this article.....cross browsers css3 border radius

Upvotes: 1

SpliFF
SpliFF

Reputation: 39014

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).

Upvotes: 2

Related Questions