cross browser background image cover

this is a solution cross browser for using background size cover which it is necessary to fill all the content inside a div

by heriberto perez

HTML

<div id="container">
    <div class="img stretch"></div>
    <div class="img stretch"></div>
</div>

CSS

html, body {
    height: 100%;
}

#container {
    width:100%;
    height: 100%;
}

.stretch {
    margin:0px auto;
    overflow:hidden;
    background-image: url(https://revostage.s3.amazonaws.com/spree/banners/87/original/REVO_06_YachtClub_1568_M_copy_D_NEW-WEB.jpg?1406301988);
    background-size: cover;
    margin-right: 5px;
    -moz-background-size: cover;  /* Firefox 3.6 */
    background-position: center;  /* Internet Explorer 7/8 */
    height: 100%;
    float: left;
    width: 45%;
    filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(
            src='https://revostage.s3.amazonaws.com/spree/banners/87/original/REVO_06_YachtClub_1568_M_copy_D_NEW-WEB.jpg?1406301988',
            sizingMethod='scale');

    -ms-filter: "progid:DXImageTransform.Microsoft.AlphaImageLoader(
                src='https://revostage.s3.amazonaws.com/spree/banners/87/original/REVO_06_YachtClub_1568_M_copy_D_NEW-WEB.jpg?1406301988',
                sizingMethod='scale')";
}