Joomla Module - Link a Background Image

Question

I have a number of Joomla modules that have a background image set. There isn't any content in the module itself, it just has a background image set under the 'Options' tab.

What I'd like to do is link the image to a page on the web site. Is this possible? How can I do it?

Kind regards

James

Answer 1

Just because you can do this, as suggested in other answers, doesn't mean that you should.

Background images are decorative, with no content value, links are meant to be used for content. What you are intending to do is basically the same as linking a colour, say Ghostwhite, to somewhere; it makes no sense at all.

If you want to link images then those images should be in your content. If you only have a background image then you don't have any content, so there is nothing to link from.

Answer 2

There is an explanation of how to do this (or similar) here

Basically create the link and give your href an id. Then create the css code (save this is your custom.css file), and apply this css classto your divs 'Module Class Suffix'.

I think this should work?!

Eample code;

HTML

<div id="site">
    <div id="full-width-header">
        <a href="/" id="home-link">Home</a>
        <div id="header-content">We love using Joomla!</div>
    </div>
    <div id="body-content">OSM saves the world!</div>
    <div id="footer-content">(c) the really cool web-designer</div>
</div>

CSS

#full-width-header {
    position: relative; /* necassary to
        absolute-position the child-element
        #home-link relative to the header */
    background: url(header-logo.jpg);
    width: 800px;
    height: 172px;
}
#home-link {
    position: absolute;
    display: inline-block;
    width: 200px;    /* width of the logo */
    height: 172px;   /* height of the logo */
    top: 0; left: 0; /* top-left corner of logo */
    border: 0;
    float: left;
    visibility: hidden;
}
#header-content {
    position: relative;
    float: right;
    width: 400px;
    height: 172px;
    vertical-align: bottom;
    text-align: right;
}

Hope it helps.

Answer 3

You need to add in a link that fills the size of your module so that your module is a clickable link.

I presume that you are using custom HTML modules, if so you can open the module and put in the following code as HTML content (use "toggle editor" or the option to view the source code, depending on your editor).

<a href="insert-link-here" style="display: block; width: 100%; height 100%"> </a>