Backgroud images on a link

Hi

I have a link that is sized with CSS at 12px.

I want a background behind this which is 30px

The issues I have is that the background gets resized to the size of the link text - so is much smaller that I wanted.

I have tried adding

line-height: 30px;
height: 30 px;

but neither seem to make any difference and the image still remains much smaller.

I am relatively new to CSS so any help would be appreciated.

 

a link, <a>, is an inline element and does not have the width or height properties.

Depending on how and where you're using your link(s), there are a variety of methods to achieve what you want. Without more info, we can only throw, um, mud at the wall to see what sticks.

Please post your html and css for the area of interest. Be sure to include its context. A link to the page would also help.

cheers,

gary

 

Try using a tags wrapped around divs, like so:

<a href="page.html">
<div style="width: 30px; height: 30px; background-image: url(bgimage.gif);">
Click to go to my page
</div>
</a>

Code (markup):

Not sure if it'll work or not, but its worth a try

 

That is a terribly bad suggestion. You should make some effort to learn html, and not lead folks astray. An <a> element may contain only inline content.

gary

 

Hi and thanks for the input to both:

Here is a line of the html - I have currently put a table within the <li> tag to get teh dimensions but I know this is not how i wish to achieve the result -

<ul>
     <li><table cellpadding="0" cellspacing="0">
         <tbody>
         <tr>
          <td width="230" height="30">
            <a href="link here">anchor</a>
         </td>
        </tr>
      </tbody>
     </table>
    </li>
    <li>repeat the above.....

Code (markup):

It is a kind of CSS drop down menu I am working on and using the <ul> is essential. I can get the background image behind the link no problem but not at the size I wanted hence the use of tables.

So as you can see I am trying to get a link or list element sized at 230 x 30 which is the size of the background image.

I have tried adding the height and line-height elements to both the <a> - (which I now understand why that didn't work), and the <li> but it doesn't make a difference.

Thanks a lot and I hope this is enough information to go on.

 

Lose the table stuff. It only stinks up the markup. Set the height and width on the li, set the a to block with height:100%.

cheers,

gary

 

and still keep the background image on the <A>? I still can't seem to get it to work!!

Thanks for helping though!

 

I DO know HTML. I've had it mastered for 4ish years or so. I said it was worth a try, I didn't say it would work or was the best way to go.

 

If you've had it mastered, you would know that's invalid. Don't spread fallacious suggestions.

gary

 

Show us exactly what you have done.

cheers,

gary

 

wow, lots of arguing, no solutions. Gary, while you are correct in railing against the train wrecks of code presented so far, you've not presented a SOLUTION.

The PROBLEM here is that you want to keep the anchor inline, but you want to give it dimensions. The SOLUTION is called 'inline-block'.

lose the table and add the following to the CSS for the anchor tag,

	display:-moz-inline-block;
	display:-moz-inline-box;
	display:inline-block;

Code (markup):

The first two makes up for pre 3.0 versions of firefox lacking PROPER display:inline-block (only took them the better part of a century to add that to gecko) using their own internal 'testing' versions instead, the latter is for everybody else. (IE has trouble setting inline-block on block-level containers, thankfully anchor is inline level)

Note, there will be spaces between multiple anchors if done this way because they are inline-level containers, so white-space is a concern unless you format your LI with no whitespace, or embed your formatting white-space inside the tags thus:

<ul id="mainMenu">
  <li><a href="link1">link1</a></li
  ><li><a href="link2">link2</a></li
  ><li><a href="link3">link3</a></li>
</ul>

Code (markup):

Looks funky, but prevents the extra white-space from being added. The other alternative to inline-block is to float your LI - which may or may not be an option for you depending on your layout.

NOTE, the above is if this is a horizontal list or assuming your anchors are inline in a paragraph or something. If they are going to appear one atop the other just set them to display:block; - pretty much I'd have to see the appearance you want to tell you the best way to do it.

 

Actually, I did. See http://forums.digitalpoint.com/showpost.php?p=9503349&postcount=6

gary

 

thanks for all the input but I still cannot achieve any more than just the a small version of the image.

Here is the link: ( I am working on this so it may change)

http://www.componentcompare.com/index_test.php

This is currently the best I can achieve with the menu - the images are a lot smaller that I wanted them to be, I guess because of the text size.

I have tried all options above but either I get a lot of white space and very little image (only the length of the text as well as only the height) or I get what I currently have.

Been driving me mad for a couple of days now! I'm scertain it is something simple that I am not grasping.

Thanks a lot