CODEWITHSUNDEEP
cssbackground-image
John the Ripper
John the Ripper

Reputation: 2439

Make an anchor tag stretch to be the size of its background image

I'm trying to display an icon as a background image behind a number.

<a id="youhavemail" href="messages.php">0</a>

#youhavemail {
  background-image: url("images/mail.png");
  background-repeat: no-repeat;
  background-size: 20px auto;
}

But since there is only one character in the anchor tag (in this case a '0') it only shows a small portion of the image.

Is there a way to stretch the containing anchor to show the whole background image?

Upvotes: 0

Views: 1754

Answers (1)

Robert McKee
Robert McKee

Reputation: 21487

#youhavemail {
  background-image: url("http://linenwoods.com/images/offline.png");
  background-repeat: no-repeat;
  background-size: 20px auto;
    display: inline-block;
    width:20px;
    height: 20px;
}

Upvotes: 2

Related Questions