homepage Welcome to WebmasterWorld Guest from 23.22.194.120
register, free tools, login, search, pro membership, help, library, announcements, recent posts, open posts,
Become a Pro Member

Visit PubCon.com
Home / Forums Index / Code, Content, and Presentation / CSS
Forum Library, Charter, Moderators: not2easy

CSS Forum

    
background-size in Chrome
greencode




msg:4519038
 2:55 pm on Nov 14, 2012 (gmt 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?

 

not2easy




msg:4519111
 6:13 pm on Nov 14, 2012 (gmt 0)

Try setting the size and background properties of the container (p, div, span..)rather than assigning size properties to a.

greencode




msg:4519123
 7:00 pm on Nov 14, 2012 (gmt 0)

Is it therefore not possible to have an a selector with background-size?!

lucy24




msg:4519148
 8:43 pm on Nov 14, 2012 (gmt 0)

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)

greencode




msg:4519312
 11:24 am on Nov 15, 2012 (gmt 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.

greencode




msg:4525580
 5:59 pm on Dec 6, 2012 (gmt 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;
}

Global Options:
 top home search open messages active posts  
 

Home / Forums Index / Code, Content, and Presentation / CSS
rss feed

All trademarks and copyrights held by respective owners. Member comments are owned by the poster.
Home ¦ Free Tools ¦ Terms of Service ¦ Privacy Policy ¦ Report Problem ¦ About ¦ Library ¦ Newsletter
WebmasterWorld is a Developer Shed Community owned by Jim Boykin.
© Webmaster World 1996-2014 all rights reserved