I have section of icons on my page. 
[![enter image description here](https://i.stack.imgur.com/aTiFR.png)](https://i.stack.imgur.com/aTiFR.png)

However, because I'm using background image, I had to specify a pixel height for the div `.iconImage.linkedIn`. I tried specifying a percentage height, but it didn't work. I want to make this website look good for different resolutions, so how do I give the div with the background image a percentage height while keeping the same functionality of the icons (text and image lights up upon hovering over link) ? ***Please do NOT give me an answer that uses pixels or ems for height/width because I want a website that looks good for different resolutions.***

**HTML:**

```
<div class = "icon">
    <a href="https://www.linkedin.com/" target="_blank">
        <div class = "iconImage linkedIn"></div>
        <div class = "iconTitle linkedIn">LinkedIn</div>
    </a>
</div>

```

**CSS:**

```
.iconImage.linkedIn {
    height: 50px;
    background-image: url('../images/linkedin.png'); 
}

.icon a:hover > .iconImage.linkedIn {
    background-image: url('../images/linkedinhover.png');
}

.icon a:hover > .iconTitle.linkedIn {
    color: rgb(130,130,130);
}

```