Good “background-size: cover” fallbacks/shims/tricks for cross-browser compatibility on DIVs?

Question

So I\'m using background-size:cover to achieve the desired effect of a background image that scales to any size of the div it\'s applied to while maintaining th

Answer 1

If you need to shrink the size of your image, rather than grow it, this approach doesn't work. The best approach I've found avoiding Javascript is superimpose two images on top of each other, on hover make the top one transparent. All other approaches involving resizing the originals (eg, background-size) seem to fail in IE.

CSS:

.social-btn-container {
    width:46px;
    height:46px;
    position:relative;
    float: left;
    margin-right: 15px;
}   
.social-btn-container:hover > .top-btn {
    visibility:hidden;
}
.social-btn {
    margin:0;
    padding:0;
    border:0;
    width: 46px;
    height: 46px;
    position: absolute;
    left:0;
    top:0;
}   
.top-btn {
    z-index: 1;
}
.top-btn:hover {
    opacity: 0;
}

HTML:

The .social-btn-container:hover > .top-btn part gets this working in IE quirks mode, which doesn't seem to support opacity, and if you use :hover{visibility:hidden} hover becomes false when visibility becomes hidden, causing flickering. (The outer div also positions the images.) I've tested this in FF23, IE standards and quirks (getting IE 10 to emulate 7, 8 and 9), Opera and Safari.