[FIXED] How can I force an image to display in its entirety with CSS?

Issue

I have a small icon (17 X 17) that links to a page which I'm trying to display like so:

<a class="finaff-small-pdf-form-icon" href="/Financial_Affairs_Forms/Payee_Setup_204.pdf">Payee Setup 204</a>

The CSS class referenced is defined thus:

.finaff-small-pdf-form-icon {
    position: relative;
    line-height: 20px;
    padding-left: 20px;
    border: none;
    background-image: url("/_layouts/images/pdficon.gif");
    background-repeat: no-repeat;
}

The icon:

../gets truncated at the bottom, though:

I tried the following with background-size in the CSS class:

background-size: 100% 100%;
background-size: 80px 60px;
background-size: contain;

...but none of them made any difference.

How can I get the icon to show all of itself, even its feet?

Solution

The code you have provided works fine. I have created a fiddle using your existing styling and HTML:

JSFiddle

HTML

<a class="finaff-small-pdf-form-icon" href="/Financial_Affairs_Forms/Payee_Setup_204.pdf">Payee Setup 204</a>

CSS

.finaff-small-pdf-form-icon {
    position: relative;
    line-height: 20px;
    padding-left: 20px;
    border: none;
    background-image: url("http://i.stack.imgur.com/vIXOF.gif");
    background-repeat: no-repeat;
}

I presume your issue is coming from parent styles that are being applied to containing elements on your page. You should look at the browser's developer console for more clarification on what is causing that styling issue (F12)

Answered By - leigero

Answer Checked By - Senaida (PHPFixing Volunteer)