Responsive Background-Images

Responsive_background_img

/* Responsive Background-Images */

/* A neat trick to make it possible for background-images to ‘fluidly’ resize keeping the same aspect ratio and without leaving space below or chopping off the image. The smart move is to 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.*/

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

/* The percentage in the padding-bottom is the aspect ratio of your image. Divide the height by the width of the image, then multiply it by 100 and you’ve got your exact percentage. If the image height is bigger then the width you’ll have a percentage >100%! */