Question

Im trying to make a button responsive and scale to the browser size.

I did set the image as a background image on the tag but didn’t seem to be getting the desired effect. I’ am now using the image inline with the following code.

HTML

<section class="desktop">
    <img class="logo" src="styles/css/images/oatbook.png" title="OATBook | Oral Anticoagulant Therapy">
    <a class="downloada" href="#"><img class="downloadimg" src="styles/css/images/download.png" title="OATBook | Oral Anticoagulant Therapy">sadf</a>
        </section><!-- desktop END -->

CSS

 a.downloada {
    background: aqua;
    max-width: 63%;
    display: block;
    margin: 0 auto;
    margin-top:10px;
    text-indent: -4000px;
    cursor: pointer;
    }
img.downloadimg {
    max-width: 100%;
    display: block;
    text-indent: -4000px;
    cursor: pointer;
    }

Live Example
http://www.oatbook.co.uk/preview/

The problem is its currently responsive with the width, but displaying the whole sprite as the height seems to remain the same.

Open to other suggestions of best practise

Answer 1

Check out Stretchy Sprites (instructions & demo)

This method allows sprites to be resized proportionately, and doesn’t rely on background-size which is only supported in newer browsers. No javascript, just HTML/CSS.

It works using a spacer image which is proportionate to your sprite.