DPMC87 DPMC87 - 11 months ago 47
CSS Question

Content not staying in their divs on resize

I have 3 boxes with backgrounds that change color on mouseover. Above their backgrounds are placeholder images for now. I'm using vw for the backgrounds so that when the window is resized they change size to match.

I'm trying to get the images to align to the center of the box and to resize according to their boxes.

Here's my 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>

Answer Source

Try adding image as background to anchor tags like this:

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%;        

This way you have responsive background. Here is a FIDDLE to try it.

Notice I added just for the third item, to show you the effect.