Web Analytics Made Easy -
StatCounter css background image as link - CodingForum

Announcement

Collapse
No announcement yet.

css background image as link

Collapse
X
 
  • Filter
  • Time
  • Show
Clear All
new posts

  • css background image as link

    Hey guys,

    I have a background image formatted with my .css file, but I need to have it act as a link, so when you click on it it directs you to another site. Couldn't find really anything, any ideas?

    thanks

  • #2
    Do you really think this is smart? Make your entire site into one big hyperlink? Anyways, check out z-indexes. Use them instead of bg images
    Always Use a DOCTYPE!
    Always Use * {margin: 0; border: none; padding: 0;} in the top of your CSS stylesheet.
    Always Use only CSS for layout; never (X)HTML.
    Always Have fun while coding!

    Comment


    • #3
      no no, my whole site wouldnt be a big hyperlink, the small picture (actually an icon), is just the background for a block.

      check out

      http://baysidesuperior.org/Bayside/media.html

      the little green "play" buttons are the buttons i want people to click when they want to download it. Instead of putting a picture in every time I just set the background for the block as that picture and positioned it.

      Comment


      • #4
        Well you're using your background image for the whole <p>, so there's not really a simple solution without linking the whole <p>. If you want to link just the icon, it's probably best to make it a real DOM element and add it programatically to the <p>s inside #mcontent.
        .My new Javascript tutorial site: http://reallifejs.com/
        .Latest article: Calculators — Tiny jQuery calculator, Full-fledged OOP calculator, Big number calculator
        .Latest quick-bit: Including jQuery — Environment-aware minification and CDNs with local fallback

        Comment


        • #5
          Hi there,
          Can't you just set this background image directly to your anchor, after giving a display:block; style?

          Code:
          #mylink{
          display:block;
          width:100px;
          height:100px;
          line-height:100px;
          background:url(myimage.jpg);
          }
          Code:
          <a href="mypage.html" id="mylink">View my page</a>
          Digitalocean Cloud Hosting (Referral link - get $10 free credit) Fameco

          Comment

          Working...
          X