CSS: использование div и фонового изображения, изображение без изменения размера для размера div

Question

У меня есть значки социальных сетей, размер которых равен 71px. Я хочу сжать изображения до 50px с помощью CSS. Я использую div, чтобы сделать эффект hover и изменить его на другое изображение, которое является в основном тем же изображением, но окрашенным в синий цвет.

Я не могу понять, почему мои изображения не изменяются, установив на них background-size: cover. Они обрезаются, как показано ниже.

Btw, я использую Bootstrap.

HTML

<div class="row"> 
    <div class="col-md-12 col-sm-12"> 

     <div id="social_fb" class="social_icon"></div> 
     <div id="social_twitter" class="social_icon"></div> 
     <div id="social_gplus" class="social_icon"></div> 

    </div> 
</div> 

CSS

body { 
margin: 0; 
padding: 90px 0 0 0; 
font-family: 'Raleway', sans-serif; 
} 

#site_wrapper { 
    overflow-x: hidden; 
} 

a { 
    text-decoration: none !important; 
} 
a:hover { 
    color: #ed1c24; 
} 

h1, h2, h3 { 
    margin: 0; 
    color: #888; 
} 
h1 { 
    font-size: 30px; 
} 
h2 { 
    font-size: 24px; 
} 
h3 { 
    font-size: 20px; 
} 

section > .container { 
    border-bottom: 1px solid #ececec; 
    padding-top: 80px; 
    padding-bottom: 80px; 
} 

.valign_center { 
    display: inline-block; 
    vertical-align: middle; 
} 

.nopadding { 
    padding: 0 !important; 
    margin: 0 !important; 
} 

#social_media .container { 
    padding-top: 50px; 
    padding-bottom: 50px; 
} 

#social_media h2 { 
    font-size: 28px; 
    color: #0095da; 
    margin-bottom: 30px; 
} 

.social_icon { 
    display: block; 
    background-size:cover; 
    width: 50px; 
    height: 50px; 
} 

#social_fb { 
    width: 50px; 
    height: 50px; 
    background: url("../images/social_fb.png"); 

} 
#social_fb:hover { 
    width: 50px; 
    height: 50px; 
    background-image: url("../images/social_fb_hover.png"); 
} 

#social_twitter { 
    width: 50px; 
    height: 50px; 
    background: url("../images/social_twitter.png"); 
} 
#social_twitter:hover { 
    width: 50px; 
    height: 50px; 
    background-image: url("../images/social_twitter_hover.png"); 
} 

#social_gplus { 
    width: 50px; 
    height: 50px; 
    background: url("../images/social_gplus.png"); 
} 
#social_gplus:hover { 
    width: 50px; 
    height: 50px; 
    background-image: url("../images/social_gplus_hover.png"); 
} 

Answer 1

Причина в том, что вы устанавливаете background в своих стилях для #social_twitter, #social_fb и т. Д. Это имеет приоритет над background-size: cover.

Если вы установили свойство фона background-image, он должен начать работать.

CSS

#social_fb { 
    width: 50px; 
    height: 50px; 
    background-image: url("../images/social_fb.png"); 

} 
#social_fb:hover { 
    width: 50px; 
    height: 50px; 
    background-image: url("../images/social_fb_hover.png"); 
} 

#social_twitter { 
    width: 50px; 
    height: 50px; 
    background-image: url("../images/social_twitter.png"); 
} 
#social_twitter:hover { 
    width: 50px; 
    height: 50px; 
    background-image: url("../images/social_twitter_hover.png"); 
} 

#social_gplus { 
    width: 50px; 
    height: 50px; 
    background-image: url("../images/social_gplus.png"); 
} 
#social_gplus:hover { 
    width: 50px; 
    height: 50px; 
    background-image: url("../images/social_gplus_hover.png"); 
}