<a> tags and background images: possible?

Discussion in 'CSS' started by Supergrover1981, Dec 21, 2006.

0
  1. #1
    Hi gang,

    I'm currently trying to get a background image to display in an <a href="xyz.html" class="xyz" style="background:url(xyz.png)"> tag.

    There isn't any content within the <a> tag, and it seems to be ignoring the width & height specifications in CSS class/style - the background only starts to show if I enter "hard" content between the <a> and </a> tags.

    If anyone has any ideas on how to get around this, I'd be most appreciative.

    Many thanks,
    - JB
     
    Supergrover1981, Dec 21, 2006 IP
  2. thedark

    thedark Well-Known Member

    Messages:
    1,346
    Likes Received:
    43
    Best Answers:
    0
    Trophy Points:
    168
    Digital Goods:
    1
    #2
    why you want to do this ? you can add a links image without css, only simple <a href=""><img src=""></a>
     
    thedark, Dec 21, 2006 IP
  3. Dan Schulz

    Dan Schulz Peon

    Messages:
    6,032
    Likes Received:
    436
    Best Answers:
    0
    Trophy Points:
    0
    #3
    I think he wants to use some image replacement.

    At the very least (as deathshadow and I told him on SitePoint) he needs to declare his links as block-level elements and then give them a width and height.
     
    Dan Schulz, Dec 21, 2006 IP
  4. Lichurec

    Lichurec Peon

    Messages:
    61
    Likes Received:
    4
    Best Answers:
    0
    Trophy Points:
    0
    #4
    maybe he has to / wants to use non-standard fonts in (for example) menus.. ;)
    I agree in 100%!

    in your CSS file:
    a.xyz{
[B]display: block;[/B]
width: 20px;
height: 10px;
background: transparent url(path/to/your/background.png) 0 0 no-repeat;
    Code (markup):
    It's very important to have those links displayed as block element IF you have to keep the link "empty" and still display its background.
    Problem is that when you do this it will act as a block element (just like DIVs) - so some interest in float: would be a handle thing.. ;)
    You would probably want those link to still have some content (like a description) - for (let's say..) text based / speech based web browsers - but wouldn't want that content to be visible.. hack: adding negative text-indent: .. but keep it BIG, so that link-text will always go out of the screen
    a.xyz{
float: left;
display: block;
width: 20px;
height: 10px;
background: transparent url(path/to/your/background.png) 0 0 no-repeat;
[B]text-indent: -1000em;[/B]
    Code (markup):
    Wanna know how it works? Search for topmenu in Sample 1 or Sample 2

    Hope that helps..
    IF you'd still have some questions - just write ;)

    Kindly regards,
    L.
     
    Lichurec, Dec 21, 2006 IP
  5. Dan Schulz

    Dan Schulz Peon

    Messages:
    6,032
    Likes Received:
    436
    Best Answers:
    0
    Trophy Points:
    0
    #5
    A better way would be to put an empty inline element (preferably a <span> but that won't work on Mac-IE; as if anyone uses that dead browser these days anyway) inside the anchor (just before the link text), give both the anchor and empty element a block declaration, width and height, then give the empty container (ok, I'll call it a span from now on) a relative position and a z-index, plus a negative top margin equal to the height of the anchor. That way if the image cannot be presented, the link text will still show through.

    I have to head to bed right now, otherwise I'd post an example. If I don't forget in the morning (busy day ahead of me), I'll put one up here for you :).
     
    Dan Schulz, Dec 22, 2006 IP