reduce css background size
I am having difficulty in reducing the size of a background image using css.
Initially I thought that adding" image-size" then a percentage reduction might work but it has not.
Any ideas on how I can decrease the size of background used on this simple link button style?
Thanks,
N
Initially I thought that adding" image-size" then a percentage reduction might work but it has not.
Any ideas on how I can decrease the size of background used on this simple link button style?
Thanks,
N
a.readMore:link, a.readMore:visited {
background-image: url(../images/structure/find-out.png);
background-repeat: no-repeat;
display: block;
height: 31px;
width: 96px;
float: right;
ASKER
adding overflow hidden did not work.
This is what I have tried so far:
This is what I have tried so far:
a.readMore:link, a.readMore:visited {
background-image: url(../images/structure/find-out.png);
background-size: 70% 70%;
background-repeat: no-repeat;
display: block;
height: 31px;
width: 96px;
float: right;
Can you just shrink the image in PhotoShop or something?
background-size only really needs one parameter also you could change it to numbers rather than percents try
background-size:70%;
or
background-size:200px;
background-size:10em;
background-size:70%;
or
background-size:200px;
background-size:10em;
ASKER
Not working....
ASKER CERTIFIED SOLUTION
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
ASKER
Yes, you are spot on with that. Cheers,
N
N
CSS cannot "shrink" or "reduce" the size of an image with just CSS. There are scripting ways to do it, however CSS is not one of them. You would need to reduce the image in Photoshop or any other image editing software.
overflow:hidden;