background-image and background-size get ignored by browser

Question

Hi there,
the code background-image and background-size are ignored by my browser somehow. For background-image I solved it with only writing background instead of background-image. Why is that?
For the size of the icons I have no solution though. How can I make them small enough to fit?
my code:
.contact_info {
    list-style-type:none;
    padding:0; 
    margin:0;
    font-size:0.9em;
}
.contact_info a {
    display:block;
    min-height:20px;
    background-size:20px 20px;
    padding: 0 0 0 30px;
    margin: 0 0 10px;
}
.contact_info li.phone a {
    background: url("../img/phone.png") no-repeat;
}
.contact_info li.mail a {
    background: url("../img/mail.png") no-repeat;
}
.contact_info li.twitter a {
    background: url("../img/twitter.png") no-repeat;
}

Tanja Heese · Answer

Thank you for your reply! 
I was using the newest Chrome.  But it works now. Whatever it was...

Marc Busby · Answer

Hi Tanja,
What browser are you using? It's possibly a compatibility issue but most browsers support the background-image and background-size markup.
See this site for compatibility (http://caniuse.com/#feat=background-img-opts) for details.
Regards,

Welcome to the Treehouse Community

Looking to learn something new?

Tanja Heese

Tanja Heese

background-image and background-size get ignored by browser

2 Answers

Marc Busby

Marc Busby

Tanja Heese

Tanja Heese