Grow your CSS skills. Land your dream job.

Question to experts: How to attach a Link to a background image?

  • # September 22, 2010 at 10:33 pm

    How can I attach links to images that are set up as backgrounds in css? Is there a way to do achieve that? The reason why I want to set the images as backgrounds is because I dont want them to move durign browser scrolling.

    I will appreciate any hint or a referral to a good resource/article.

    Many thanks.

    eXo
    # September 23, 2010 at 4:44 am

    What do you want?

    If you scroll down that the background doesn’t move?

    OR

    That your background has a link?

    # September 23, 2010 at 9:37 am

    I want both :-)

    but I think I will try to use fixed position for my images to make sure they dont move

    # September 23, 2010 at 9:46 am
    body {background: #fff url("/media/kfc/images/bg_sub.png") no-repeat fixed left top}

    The word ‘fixed’ fixes the background image, therefore it doesn’t scroll.

    ‘How can I attach links to images that are set up as backgrounds in css?’ – You will need an anchor link.

    # September 23, 2010 at 5:03 pm

    Am I right in assuming you want to be able to click the background image and then maybe display it on its own, or in a new tab/window? Like using Firefox: right click the background image and choose view background image?

    If you want to do it programmatically (scriptically??) this might be worth a try…

    Set an onclick event for the element with the background image that calls a javascript function to get the background image url from the CSS and then go to it…



    ...

    getComputedStyle() is necessary if the background image has been set in a separate style file rather than an inline style – which is usually the case.

    The backgroundImage property is the string that sets the background image – something like url(….). The substring bit removes the url(” and “) from the backgroundImage property of the element leaving just the URL itself: http://www….whatever. Quick and dirty but works OK in Firefox.

    Any <a> tags in the element will still work but if you click on an otherwise inactive area you should get just the bg image.

    # September 23, 2010 at 10:05 pm

    I have not an idea how to achieve this. Many thanks to all of you

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

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".