0

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>
Sackling
  • 1,780
  • 5
  • 37
  • 71

4 Answers4

2

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/

Phrogz
  • 296,393
  • 112
  • 651
  • 745
  • I am close but I need to position the background since it is part of a larger image and I can't seem to do that while anchoring to top: background:url(../img/package.png) no-repeat top left 0px -400px – Sackling Oct 20 '11 at 20:31
  • @Sackling In the future, please provide relevant details and requirements in your question. If you need to clip a subsection of a CSS sprite see http://stackoverflow.com/questions/2770222/css-sprite-techniques-css-background-or-imgs-clip This is a downside to using CSS sprites – Phrogz Oct 20 '11 at 20:32
  • Right. Sorry about that slipped my mind while writing the question. Thanks for the info though. – Sackling Oct 20 '11 at 21:33
1

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/

albert
  • 8,112
  • 3
  • 47
  • 63
0

Use padding-top on the <a> tag

Syntax Error
  • 4,475
  • 2
  • 22
  • 33
0

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.

stephenhay
  • 2,824
  • 24
  • 25