height values for the background image or use the contain value if the dimensions of the HTML element are already specified. It is worth noting that the background-size property is not supported in IE 7 or 8. .image { background-image: url(example@2x.png); background-size: 200px 300px; /* Alternatively background-size: contain; */ height: 300px; width: 200px; }
You could also target a :before or :after pseudo-element instead: .image-container:before { background-image: url(example@2x.png); background-size: 200px 300px; content:''; display: block; height: 300px; width: 200px; }
This technique works just as well with CSS sprites, as long as the background-position is specified relatively to the CSS size (200 Ă— 300 pixels in this case): .icon { background-image: url(example@2x.png); background-size: 200px 300px; height: 25px; width: 25px;
&.trash { background-position: 25px 0; }
&.edit { background-position: 25px 25px; } }
When using image sprites, consider any OS-specific limitations57.
53