CODEWITHSUNDEEP
css
Sackling
Sackling

Reputation: 1820

Using css with background image for anchor AND keep text?

I always use the technique of making css buttons with a text-indent of -9999px to hide the text. But what if I want to show the text as well?

I want to place the text at the bottom of a large image I am using. I can only get the text to display at the top.. Anything I can do?

basic code:

    .package_EN { background:url(../img/package.png) no-repeat -400px 0px; width:400px; height:293px; font-size:12px; text-decoration:none; display:block; color:#fff; font-family:Arial, Helvetica, sans-serif;  float:left; }
.package_EN:hover { background:url(../img/package.png) no-repeat -400px -301px; width:400px; height:374px; display:block; }

 <div style="margin-top:120px; margin-left:90px; text-align:center;">
<a class="package_FR" href="img/sponsor_package_en.pdf">Cliquez ici pour télécharger</a>
<a class="package_EN" href="img/sponsor_package_fr.pdf">Click to download</a>
</div>

Upvotes: 0

Views: 5613

Answers (4)

stephenhay
stephenhay

Reputation: 2874

This can be done with line-height. In this case, you'd want to set the line-height to something like 2 * [height of link] - [font-size]. Using your values:

.package_EN { line-height: 574px; } /* (293 * 2) - 12 */

Adjust as necessary.

Upvotes: 0

albert
albert

Reputation: 8153

here's on solution, i changed your bg positioning and the color of the text so you can see it http://jsfiddle.net/jalbertbowdenii/RrC4e/

Upvotes: 1

Phrogz
Phrogz

Reputation: 303254

You want to use a background image and have it above (higher on y axis) your text?

  1. Anchor the background image to the top.
  2. Set the padding-top of the object to the object to the height of the image.
  3. Use display:inline-block (if you want the padding to not cross into other lines)

Demo: http://jsfiddle.net/HTFvB/ or http://jsfiddle.net/HTFvB/1/

Upvotes: 2

Syntax Error
Syntax Error

Reputation: 4527

Use padding-top on the <a> tag

Upvotes: 0

Related Questions