CSS: Responsive BG Image

Responsive BG Image

The way around this is so set the height to 0 and work out the height depending on the aspect ratio of the image itself and use padding-bottom to reveal the image instead. To do this you have to divide the width by the height and multiply by 100. This is the percentage of width to height which is then applied to the bottom padding as a percentage to reveal the image and will now keep the aspect ratio of the image and the element it is applied to consistent at all widths. You’ll also need to use background-size: 100% to keep the image the same size as the element.


<a class="background" href="#">Background Image Applied Here</a>

.background {
    display: block;
    height: 0;
    padding-bottom: 62.571428571429%;
    background: url(image.jpg) no-repeat;
    background-size: 100%;
    text-indent: -9999px;
}