CODEWITHSUNDEEP
cssbackground-image
luqita
luqita

Reputation: 4087

Using image as generic link background

How can I do to have an image as the background for all links? I want to have a nice box representing buttons, but I cannot figure this out.

I have tried: 

a { 
    font-size: 40px;
    background: url('images/shooting-stars/shooting-star-link.png') no-repeat left top; 
}

But this is not working, image is not displaying.

Upvotes: 1

Views: 175

Answers (3)

Stephan Muller
Stephan Muller

Reputation: 27620

"I want to have a nice box representing buttons, but I cannot figure this out." - I don't understand this part.

Anyway, your css looks fine from here, are you sure the image exists? This is a working example with the exact same code, just an image that I'm sure exists:

http://jsfiddle.net/3k9nm/

If you want to always show the image, even if the text is shorter, you should set a minimum width for the links. This does mean they'll have to be inline-blocks, you can't set width on a regular link (which is an inline element).

a {
  display: inline-block;
  min-width: 25px;  
}

(25px was randomly chosen, fill in the width of your background image..)

Upvotes: 2

enthusiastic
enthusiastic

Reputation: 742

HTML

<div id="example-link">
  <a href="#">Link to journal article</a>
</div>

CSS

#example-link a { 

  background: url('images/shooting-stars/shooting-star-link.png'); 
}

Upvotes: -1

benhowdle89
benhowdle89

Reputation: 37504

Two things to try, is there any text in the actual <a> links? And if you use Firebug, you can check you've definitely got the right file path to the image...

Upvotes: 0

Related Questions