CODEWITHSUNDEEP
css
Eddie
Eddie

Reputation: 59

Change Link Text to Image Using CSS

I'm trying to change a text link on my site to an image using css...need some help please. Below you will see my css - I would like to change my favorite text http://cl.ly/0S2j28082G2W423Y2T00 to an image.

a.upb_add_bookmark {
    background: none repeat scroll 0 0 #E8BD61;
    border-color: #C79324;
    border-style: solid;
    border-width: 1px;
    color: black;
    padding: 2px 5px;
    text-decoration: none;
}

Upvotes: 0

Views: 18151

Answers (4)

Smart Systems
Smart Systems

Reputation: 143

a.upb_add_bookmark {
background: url('image.png') no-repeat;
border:none;
width: 92px;
height: 51px;
color: transparent;
padding: 2px 5px;
}

This code works for me

Upvotes: -1

Vin Burgh
Vin Burgh

Reputation: 1419

Your background property will need to be set to include the image. You will also need to set the <a> element as an inline-block so that you can declare a height and width for it.

a.upb_add_bookmark {
 background: url('favorites-image.jpg') no-repeat;
 display: inline-block;
 height: 51px;
 width: 92px;
}

Thats how you can display an image without actually using an <img> tag; nothing but css.

Upvotes: 4

pat8719
pat8719

Reputation: 1700

A very simple way to fix this problem

** 1. Create a div element that will encapsulate this image **

** 2. Add CSS in order to set that background of this div to be the image. (See code below). In this example the class name of your div will be called 'button'

       .button
        {
            backgroundimage:url('http://cl.ly/0S2j28082G2W423Y2T00/Screen%20Shot%202012-02-09%20at%2012.02.45%20PM.png');
            height: 50px;
            width: 92px;
        }

        .button a
        {
            display: inline-block;
            height: 50px;
        }
  • Revise the Html *

Put the text you want to display into the aforementioned div with the class name 'button'

    <div class="button">

        <span>Favorite (1)</span>

    </div>

* This will allow you to select the actual text while still maintaning the background *

Here is the complete version source with my modification for your reference.

<!DOCTYPE html>
<html class="no-js" dir="ltr" lang="en">
  <head>

    <style>

        .button
        {
            background-image:url('http://cl.ly/0S2j28082G2W423Y2T00/Screen%20Shot%202012-02-09%20at%2012.02.45%20PM.png');
            height: 50px;
            width: 92px;
        }

        .button a
        {
            display: inline-block;
            height: 50px;
        }

    </style>

    <title>Screen Shot 2012-02-09 at 12.02.45 PM.png</title>

    <meta charset="utf-8">

    <meta content="IE=edge,chrome=1" http-equiv="X-UA-Compatible">
    <meta content="width = device-width, initial-scale = 1.0, maximum-scale = 1.0, minimum-scale = 1.0, user-scalable = no" name="viewport">

    <meta content="CloudApp" name="author">

    <link href="http://assets.cld.me/1325250420/images/favicon.ico" rel="shortcut icon">

    <!--[if (!IE)|(gte IE 8)]><!-->
<link href="http://assets.cld.me/1325250420/assets/viso-datauri.css" media="screen" rel="stylesheet" type="text/css" />
<!--<![endif]-->
<!--[if lte IE 7]>
<link href="http://assets.cld.me/1325250420/assets/viso.css" media="screen" rel="stylesheet" type="text/css" />
<![endif]-->

    <script src="http://assets.cld.me/1325250420/assets/viso.js" type="text/javascript"></script>

    <!--[if lt IE 9]>
    <script src="http://assets.cld.me/1325250420/assets/ie.js" type="text/javascript"></script>
    <![endif]-->
  </head>

  <body id="image">
    <header id="header">

    <h1><a href="http://store.getcloudapp.com/">Simple sharing</a></h1>


  <h2>Screen Shot 2012-02-09 at 12.02.45 PM.png</h2>

  <a class="embed" href="http://cl.ly/0S2j28082G2W423Y2T00/Screen%20Shot%202012-02-09%20at%2012.02.45%20PM.png">Direct link</a>
</header>

<section id="content">

    <div class="button">

        <span>Favorite (1)</span>

    </div>

</section>


    <script type="text/javascript">
      var _gauges = _gauges || [];
      (function() {
        var t   = document.createElement('script');
        t.type  = 'text/javascript';
        t.async = true;
        t.id    = 'gauges-tracker';
        t.setAttribute('data-site-id', '4ea557ec613f5d39e7000002');
        t.src = '//secure.gaug.es/track.js';
        var s = document.getElementsByTagName('script')[0];
        s.parentNode.insertBefore(t, s);
      })();
    </script>
  </body>
</html>

Upvotes: 0

Boris
Boris

Reputation: 749

<a href="http://www.site.com"><img src="image.png" alt="Favorite icon" /></a>

or 

    a {
    background-image: url('image.png');
    background-repeat: no-repeat;
    display: inline-block;
    height: 50px;
    width: 150px;
    }
    <a href="http://www.site.com"></a>

Personally I would use the first one because the image is part of the structure and not a design element and CSS deals with design.

Upvotes: 1

Related Questions