Содержимое не оставалось в их divs при изменении размера

Question

У меня есть 3 коробки с фоном, которые меняют цвет при наведении курсора мыши. На данный момент над их фонами находятся изображения-заполнители. Я использую vw для фона, чтобы при изменении размера окна они меняли размер для соответствия.

Я пытаюсь получить изображения для выравнивания по центру коробки и изменения размера в соответствии с их полями.

Вот мой JSFIDDLE

<div class="socialbox"> 
    <ul class="socialNavList"> 
     <li class="navlinkedin"><a href="#">linkedin</a></li> 
     <li class="navtwitter"><a href="#">twitter</a></li> 
     <li class="navfacebook"><a href="#">Facebook</a></li> 
    </ul> 
</div> 

Answer 1

Попробуйте добавить изображение в качестве фона для закрепления меток, как это:

ul.socialNavList li.navfacebook a { 
    background: #ccc url('http://lorempixel.com/output/nightlife-q-c-32-32-1.jpg') no-repeat; 
    background-size: 85% 85%;   
} 

Таким образом, вы должны реагировать фон. Вот FIDDLE, чтобы попробовать.

Уведомление Я добавил только для третьего элемента, чтобы показать вам эффект.