Welcome to WebmasterWorld Guest from 107.22.61.174

Forum Moderators: not2easy

Message Too Old, No Replies

background-size in Chrome

     
2:55 pm on Nov 14, 2012 (gmt 0)

Junior Member

10+ Year Member Top Contributors Of The Month

joined:July 4, 2007
posts: 193
votes: 0


I'm having difficulty getting this to work in Chrome. Instead of resizing the image it's just leaving it at 100% (32x32px)


a.remove {
display: block;
height: 16px;
width: 16px;
-moz-background-size: 16px 16px;
-webkit-background-size: 16px 16px;
background-size: 16px 16px;
background: url(images/cross.png)
}


Any ideas as to what I'm doing wrong?
6:13 pm on Nov 14, 2012 (gmt 0)

Administrator from US 

WebmasterWorld Administrator not2easy is a WebmasterWorld Top Contributor of All Time 10+ Year Member Top Contributors Of The Month

joined:Dec 27, 2006
posts:3410
votes: 174


Try setting the size and background properties of the container (p, div, span..)rather than assigning size properties to a.
7:00 pm on Nov 14, 2012 (gmt 0)

Junior Member

10+ Year Member Top Contributors Of The Month

joined:July 4, 2007
posts: 193
votes: 0


Is it therefore not possible to have an a selector with background-size?!
8:43 pm on Nov 14, 2012 (gmt 0)

Senior Member from US 

WebmasterWorld Senior Member lucy24 is a WebmasterWorld Top Contributor of All Time 5+ Year Member Top Contributors Of The Month

joined:Apr 9, 2011
posts:13923
votes: 496


Inescapable question: Do other pages use the same background image at its "real" size (32x32)?

Background-size is a pretty new selector. I wouldn't rely on it in any case. But here it's probably an issue of wording, since chrome claims to have supported it for ages. (As opposed to, say, to pick an example wholly at random, MSIE <9.)

In addition to attaching the background to the element that contains the a, instead of to the a itself, did you try all the alternative wordings? Including the ones that look too dopey to even be worth trying ;)

--100% instead of 16px (Percentage refers to the area covered, not the background image.)
--adding "round" after "no-repeat"
--"cover" or "contain" instead of numbers (both should come out the same if it's a square image and a square region being covered)
11:24 am on Nov 15, 2012 (gmt 0)

Junior Member

10+ Year Member Top Contributors Of The Month

joined:July 4, 2007
posts: 193
votes: 0


Thanks for your reply. Unfortunately I've tried all of those things you suggested and nothing appears to work. Looks like I'll have to create a 16x16 icon for browsers and 32x32 icon for retina displays.
5:59 pm on Dec 6, 2012 (gmt 0)

Junior Member

10+ Year Member Top Contributors Of The Month

joined:July 4, 2007
posts: 193
votes: 0


Actually just realised why this wasn't working in Chrome

Had things the wrong way around. Should be…


a.remove {
display: block;
height: 16px;
width: 16px;
background: url(images/cross.png);
-moz-background-size: 16px 16px;
-webkit-background-size: 16px 16px;
background-size: 16px 16px;
}