Issue related to Background-Position for Image in HTML in CSS - html

Question

I have following CSS class :
.acceptRejectAll a, .acceptRejectAll a:visited{
background-image: url("../images/view-patient.png");
background-position: left top;
background-repeat: no-repeat;
color: #4B555C;
float: left;
height: 35px;
padding-top: 12px;
text-align: center;
text-decoration: none;
width: 100px;
}
and following HTML :
<div style="float: none; display: inline-table" class="acceptRejectAll">
<a style="display:inline-block;height:25px;" href="#" class="fontBlack" id="ctl00_ContentPlaceHolder1_btnAcceptAll">Accept All</a>
</div>
this is display as follows :
when i decrease the size of in css class like : width : 85px
it displays as follows :
it cuts image from right side:
i tried to set background-Position in css class : but either left side or right side, image is not display correctly
wht is solution ?
Thanks

Answer 1

You will need to use background-size for this. Example:
background-size: 100% 100%;
Please note that this setting can scale your image to fill parent.

Answer 2

As the image is 100px (at least the visible part is about 92px so I guess the size is 100px) if you change the size of the button you need to scale the background image rather than change the position.
background-size:85px 35px;

Answer 3

Gradient and Border radius
Another way to approach this — considering the kind of button style you are using — is to go the gradient and border radius route. Whilst the code to use a css gradient looks rather messy, it is dynamically generated so you wont end up with stretched curved corners like you will using background-size.
Everything used below is pretty well supported now by most browsers. For anything that doesn't support the gradient you will get a solid blue background with curved corners instead, and it almost isn't worth worrying about non-support for border radius any more.
markup:
<div class="acceptRejectAll">
Accept All
</div>
css:
.acceptRejectAll {
display: inline-table;
border-radius: 20px;
text-align: center;
padding: 10px;
width: 100px; /* You can change the width as you like */
background: #c3e5fe; /* Old browsers */
background: -moz-linear-gradient(top, #c3e5fe 0%, #98d1fd 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#c3e5fe), color-stop(100%,#98d1fd)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #c3e5fe 0%,#98d1fd 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #c3e5fe 0%,#98d1fd 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, #c3e5fe 0%,#98d1fd 100%); /* IE10+ */
background: linear-gradient(to bottom, #c3e5fe 0%,#98d1fd 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#c3e5fe', endColorstr='#98d1fd',GradientType=0 );
}
.fontBlack {
font-family: sans-serif;
font-size: 10pt;
color: black;
text-decoration: none;
}
The gradient was generated using:
http://www.colorzilla.com/gradient-editor/#c3e5fe+0,98d1fd+100;Custom
You end up with:
http://jsfiddle.net/NDHtn/
Or as a preview:
When you must use an image
If there is no other choice but to use an image as a background for a button — say, the graphics are too complicated to replicate using css effects — rather than use one image stretched and distorted to fit, you can use something like the following. There are many ways to essentially achieve the same result, I prefer to keep my mark-up simple and my css more complicated (rather than the other way around). However, to make things more supportive of the wider browser community you can break your mark-up into three parts, rather than make use of ::before and ::after:
markup:
<a class="button" href="#">
<span>Round Button with lots of text and then some</span>
</a>
css:
.button:before {
position: absolute;
content: '';
background: url('image.png') left top;
top: 0;
left: -50px;
width: 50px;
height: 99px;
}
.button:after {
position: absolute;
content: '';
background: url('image.png') right top;
top: 0;
right: -50px;
width: 50px;
height: 99px;
}
.button {
background: url('image.png') center -99px;
height: 99px;
margin: 0 50px;
position: relative;
display: inline-block;
color: white;
text-decoration: none;
}
.button span { display: block; padding: 35px 0px; }
image.png, hacked together using this original image and pixlr.com:
Which will give:
http://jsfiddle.net/2K5Kg/1/
Example mark-up without use of psuedo elements:
<a class="button" href="#">
<span class="before"></span>
<span class="after"></span>
<span>Round Button with lots of text and then some</span>
</a>
Then in the css just replace the .button:before with .button .before and the same for :after.