Treehouse: Grow your CSS skills. Land your dream job.

Linking an Image in CSS Form

  • # May 31, 2008 at 1:21 pm

    Ok. so I am a complete newbie when it comes to css. I more or less fool around with this code to setup a band Myspace page for a band that I do sound for. I have used a css code that I got from and have just tweaked some stuff on this code to personalize it. (Btw Mike from has provided this code to anyone that would like to use it as a jump off point for a myspace page. So I am not using it illegally!) :D

    My problem lies in adding a link to a masthead image. I want to link it to our bands iTunes page, but am having trouble doing that. I have researched an answer to this question via google, but with no luck! Anyone that has any suggestions or can help me out would be doing me a huge solid and I would appreciate it immensely.

    The code that I have now for this image is:

    <div class="masthead2"><span></span></div>

    .masthead2 {width: 700px; height:140px; position: absolute; margin-left: -350px; left: 50%; top: 200px; background-image: url(// … nner-2.jpg);}

    The image in the url brackets is what I want to be able to create a hoover link to. I’m not sure if thats the right terminology for what I am trying to say, but I basically want someone to be able to hoover their pointer over the image and click it to forward them to our iTunes page.

    The url for this page is //

    Once again Thank You for any help you can offer!



    # May 31, 2008 at 2:59 pm

    what you are trying to do is not done with CSS,

    It is simply done with an <a href> tag in your page code.

    if i remember correctly the best way is to


    just remember to add border:none to your

    .masthead a { }

    so that the blue link border doesn’t show up.

    I thinks thats correct…someone migth come along with a better suggestion.

    # June 6, 2008 at 5:40 pm

    Thanks for the advice, however this seems to not have worked. :( If anyone has any other type of advice on this please let me know. And thank you again for anyone that has or can help me out!


    # June 6, 2008 at 6:01 pm

    use JavaScript!

    <div id="masthead2" onclick="location.href=’//';></div>

    .masthead2 {width: 700px; height:140px; position: absolute; margin-left: -350px; left: 50%; top: 200px; background-image: url(// … nner-2.jpg); cursor: pointer;}

    # June 16, 2008 at 10:32 pm


    Thanks for the help unfortunately javascript is a "forbidden" format in the realm of myspace. Using javascript would be violating the "terms" of myspace. But thank you for the input. I still have yet to figure this out so if you have any other suggestions I would greatly appreciate the help!


    # June 17, 2008 at 1:31 am

    try doing this…same as above

    <div id="masthead"><a href="Your url here" style="padding:700px;">&nbsp;</a>

    what you are adding is a non breaking space ( &nbsp; ) as your link then giving it some padding to extend the clickable area the length of the masthead. This is a new technique I have just picked up. Give it a try.

    the & mark is an ampersand (spell check) it’s above the 7

    # June 17, 2008 at 11:39 am

    If I’m looking at your code correctly, you cannot create a link without using <a> and </a>. So, you’ll have to add that in between your div tags.

    Shouldn’t the display:block coupled with fixed height and width on ".masthead2 a" do the trick?

Viewing 7 posts - 1 through 7 (of 7 total)

You must be logged in to reply to this topic.