Html 视网膜显示-将css中的大背景图像拟合为更小的尺寸

我的工具栏有以下css，用于显示社交图标：

.toolbar ul li {
    height: 102px;
    width: 102px;
    display: block;
    float: right;
    margin: 0 0 0 7px;
    padding: 0;
    background: url(images/social_icons.png) center top no-repeat;
}
.toolbar ul li a {
    width: 100%;
    height: 100%;
    display: block;
    text-indent: -9999px;
}
.toolbar ul li.facebook {
    background-position: 0 0px;
}
.toolbar ul li.facebook:hover {
    background-position: -102px 0px;
}
.toolbar ul li.twitter {
    background-position: 0 -102px;
}
.toolbar ul li.twitter:hover {
    background-position: -102px -102px;
}

但是，我希望我的图标在HTML中呈现时仅为34px x 34px。高分辨率图像的原因是，我可以在视网膜屏幕上更好地显示它。但是，当我改为以下选项时，它似乎不起作用：

.toolbar ul li {
    height: 34px;
    width: 34px;
    display: block;
    float: right;
    margin: 0 0 0 7px;
    padding: 0;
    background: url(images/social_icons.png) center top no-repeat;
}

---

有什么想法吗？非常感谢。

使用显示

内联块来代替显示块

或：

使用显示
内联块
代替显示块

或：

background-size: 43px 43px;