There are also a couple of image helpers for automatically determining an image's height or width. Therefore, as long as we're not using SVG images (as they are vector-based they can have indeterminate dimensions), we can use these helpers to automatically get and set the height and width of appropriate CSS properties:
.buy-amazon-uk { display: block; background-image: image-url("amazon-co-uk.png"); background-size: image-width("amazon-co-uk.png") image-height("amazon-co-uk.png"); background-position: 50% 50%; background-repeat: no-repeat; height: image-height("amazon-co-uk.png"); width: image-width("amazon-co-uk.png"); }
In this example, we are using these helpers to not only set the background-size
property but also set the image width and height. Here's the relevant CSS that compiles to:
.buy-amazon-uk { background-image: url('../img/amazon-co-uk.png?1357598801'); background-size: 223px 50px; background-position: 50% 50%; background-repeat...