LINK to background image

[mickysatig]

Hi
I've been trying to link the background image of my site so that on click it would redirect to my home page. Can someone tell me how? I know its very easy but i'm a noob

thanks in advance
micky

[babberoo]

You can't link a background image per se. The closest thing you could do would be place an <a> tag at the back of your website (with a background image) using CSS. I'd wonder why you want to do it though to be honest.

[elialum]

In continuing to babberoo's reply, make sure you style the div with "display block" and give him width and height.

the code should look something like that -

Html code -

Code: Select all

<div class="mylink">
<a href="index.php"></a>
</div> 

CSS -

Code: Select all

.mylink {
display: block;
width: 100px;
height: 100px;
}

[mickysatig]

Thanks a lot elialum and babberoo you rock!!
i could finally figure it out

[elialum]

I am glad you figured it out.

For someone else who might bump into this post, I've just noticed there is a mistake
in my code, the CSS should be ".mylink a" and not ".mylink" (we style the a tag and not the div)

Take care,
Eli.

[ermand]

I am trying to do the same thing but on a custom html module. I got a background image on this module and some text, the image repeats horizontally. Is there any way to make this image click-able just like a regular image and link to a page?

Thank you for your help

[babberoo]

Assuming you have a module with custom css suffix, you would need to put an a tag around your text, and then set the a tag to the same dimensions as your module. Depending on what your HTML is though it might make it invalid.

Code: Select all

HTML

<div class="moduletable yourcustomclass">
<a href="" class="yourlinkclass">
Soime text
</a>
</div>

CSS

div.yourcustomclass {
background: url....etc
width: 200px;
height:300px;
}

a.yourlinkclass {
display:block;
height: 300px;
width: 200px;

}

[ermand]

Thanks,

Got it.

[omar2k]

Hi, I've a problem creating a Link Background Image
I've follow your instruction but the results is that the background split after the mylin image DIV..
How to fix it??

I attach a screenshot..
Thanks!

[babberoo]

Can you post a link to the page?

[omar2k]

http://195.110.143.37:8888/yourtrip/

[omar2k]

are you able to see the page?

[babberoo]

Nope. Is that a machine on your internal network?

[omar2k]

I've put off my webserver... I can turn it on Monday...
Thanks!!

[omar2k]

http://195.110.143.37:8888/yourtrip/

Can you try to access it? Can you help me on fixing the trouble?
Thank u very much
Omar

[babberoo]

You've set the height and width to be 100% on the mylink container. You need

.mylink a {
display: block;
width: 100%;
}

You might struggle with 100% height.

[omar2k]

It doesn't work...
:-(
If I don't set height I don't look the picture...
Thanks!

[babberoo]

Give it a height, but 100% won't work so cross browser so you might need to give it set height.

[omar2k]

I give a height in pixel but it doesn't work,.... I'm becoming crazy!

[babberoo]

You're still applying the styles to the div and not to the <a>

Remove the wrapper div around your <a> and add the class to it

<a class="mylink">TRY THIS</a>

[omar2k]

Ok but I don't see the background image..

[babberoo]

I'm not quite sure what you're trying to acheive. I see the gradient image on the <a> tag but I'm not sure how you intend to use this. Can you clarify?

[omar2k]

I need to use the blue-gradient image like a linkable backgruond.. Instead of "TRY THIS"
So I need a background image instead of TRY THIS, the image is bg_page.jpg

[babberoo]

I still don't see why you'd want to make the background clickable on the current site? Where is it linking to? Why does it need to be a link? Surely just adding the gradient to the html body would achieve this?

[omar2k]

Please go to http://www.libero.it Do you look at background picture? It's linkable...
I need to link it to an external website, I need it because it's an ADVERTISEMENT Banner..

[omar2k]

I need to replace the text "TRY THIS" with a picture, linkable like "TRY THIS" to a website

[babberoo]

OK. You need to look at the html for this.

Essentially you have 2 layers

At the bottom you have a <div> that is full width/height with an <a> element set to

display: block;
height: 1430px;
left: 0px;
position: absolute;
top: 0px;
width: 100%;

The rest of the website is then in another container (also position: absolute) over the top.

[omar2k]

I'm using a CMS.... Joomla... So I've to modify index.php right?

[babberoo]

It would be simplest to do that.

Let's assume you have 2 <divs>

<div id="bkg_advert">
<a href="#"></a>
</div>

<div id="restofsite">
##YOUR SITE IN HERE
</div>

You can then position both <div>s absolutely (use z-index to stack them if needed).

[omar2k]

this is my situation

<body id="bg">

<a href="index.php" class="mylink">TRY THIS</a>


<div id="wrap_menu">
<div id="horiz-menu" class="nav">
<?php echo $main_navigation;?>
</div>
</div>
<div id="wrap_1" class="clearfix">
<div id="wrap_2">
<div id="wrap_top">
<a id="logo" href="./"></a>
<?php if ($this->countModules('advert1')) : ?>
<div id="wrap_search">
<jdoc:include type="modules" name="advert1" style="raw" />
</div>
<?php endif; ?>
</div><?php if ($this->countModules('banner')) : ?>
<div class="us-stand">
<jdoc:include type="modules" name="banner1" style="raw" />
</div>
<?php endif; ?>
<?php if ($this->countModules('header or advert2') ) : ?>
<div id="header_wrap">
<?php if ($this->countModules('header')) : ?>
<div id="header" style="width:<?php echo ($header_width != 0) ? $header_width : 590; ?>px;">
<jdoc:include type="modules" name="header" style="xhtml" />
</div>
<?php endif; ?>
<?php if ($this->countModules('advert2')) : ?>
<div id="advert2" style="width:<?php echo ($header_width != 0) ? 922-$header_width-$header_margin : 474; ?>px;margin-left: <?php echo $header_margin; ?>px;">
<jdoc:include type="modules" name="advert2" style="gavickpro" />
</div>
<?php endif; ?>
</div>
<?php endif; ?>
<div id="bg_content_wrap">
<jdoc:include type="message" />
<div id="component<?php echo $w_count ?>">
<?php if ($this->countModules('top')) : ?>
<div class="users_wrap">
<jdoc:include type="modules" name="top" style="gavickpro" headerLevel="3" />
</div>
<?php endif; ?>
<?php if($this->countModules('user1 or user2 or user3')) : ?>
<div class="users_wrap clearfix">
<?php if ($this->countModules('user1')) : ?>
<div class="<?php echo $user_position_1; ?>">
<jdoc:include type="modules" name="user1" style="gavickpro" />
</div>
<?php endif; ?>
<?php if ($this->countModules('user2')) : ?>
<div class="<?php echo $user_position_1; ?>">
<jdoc:include type="modules" name="user2" style="gavickpro" />
</div>
<?php endif; ?>
<?php if ($this->countModules('user3')) : ?>
<div class="<?php echo $user_position_1; ?>">
<jdoc:include type="modules" name="user3" style="gavickpro" />
</div>
<?php endif; ?>
</div>
<?php endif; ?>
<?php
// show mainbody on all subpages but not on frontpage
if (!$frontpage_i) :
?>
<div id="mainbody">
<jdoc:include type="component" />
</div>
<?php endif; ?>
<?php if($this->countModules('user4 or user5 or user6')) : ?>
<div class="users_wrap usbottom clearfix">
<?php if ($this->countModules('user4')) : ?>
<div class="<?php echo $user_position_2; ?>">
<jdoc:include type="modules" name="user4" style="gavickpro" />
</div>
<?php endif; ?>
<?php if ($this->countModules('user5')) : ?>
<div class="<?php echo $user_position_2; ?>">
<jdoc:include type="modules" name="user5" style="gavickpro" />
</div>
<?php endif; ?>
<?php if ($this->countModules('user6')) : ?>
<div class="<?php echo $user_position_2; ?>">
<jdoc:include type="modules" name="user6" style="gavickpro" />
</div>
<?php endif; ?>
</div>
<?php endif; ?>
<?php if ($this->countModules('bottom')) : ?>
<div class="users_wrap usbottom">
<jdoc:include type="modules" name="bottom" style="gavickpro" headerLevel="3" />
</div>
<?php endif; ?>
</div>
<?php if ($this->countModules('right')) : ?>
<div id="right">
<jdoc:include type="modules" name="right" style="gavickpro" headerLevel="3" />
</div>
<?php endif; ?>
</div>
<?php if($this->countModules('user7 or user8 or user9 or user10')) : ?>
<div id="bottom_wrap_1" class="clearfix">
<?php if ($this->countModules('user7')) : ?>
<div class="<?php echo $user_position_3; ?>">
<jdoc:include type="modules" name="user7" style="gavickpro" />
</div>
<?php endif; ?>
<?php if ($this->countModules('user8')) : ?>
<div class="<?php echo $user_position_3; ?>">
<jdoc:include type="modules" name="user8" style="gavickpro" />
</div>
<?php endif; ?>
<?php if ($this->countModules('user9')) : ?>
<div class="<?php echo $user_position_3; ?>">
<jdoc:include type="modules" name="user9" style="gavickpro" />
</div>
<?php endif; ?>
<?php if ($this->countModules('user10')) : ?>
<div class="<?php echo $user_position_3; ?>">
<jdoc:include type="modules" name="user10" style="gavickpro" />
</div>
<?php endif; ?>
</div>
<?php endif; ?>
<?php if($this->countModules('user11 or user12 or user13 or user14 or user15 or user16')) : ?>
<div id="bottom_wrap_2" class="clearfix <?php echo $user_position_4w; ?>">
<?php if ($this->countModules('user11')) : ?>
<div class="users">
<jdoc:include type="modules" name="user11" style="gavickpro" />
</div>
<?php endif; ?>
<?php if ($this->countModules('user12')) : ?>
<div class="users">
<jdoc:include type="modules" name="user12" style="gavickpro" />
</div>
<?php endif; ?>
<?php if ($this->countModules('user13')) : ?>
<div class="users">
<jdoc:include type="modules" name="user13" style="gavickpro" />
</div>
<?php endif; ?>
<?php if ($this->countModules('user14')) : ?>
<div class="users">
<jdoc:include type="modules" name="user14" style="gavickpro" />
</div>
<?php endif; ?>
<?php if ($this->countModules('user15')) : ?>
<div class="users">
<jdoc:include type="modules" name="user15" style="gavickpro" />
</div>
<?php endif; ?>
<?php if ($this->countModules('user16')) : ?>
<div class="users">
<jdoc:include type="modules" name="user16" style="gavickpro" />
</div>
<?php endif; ?>
</div>
<?php endif; ?>
<div id="footer_wrap">
<?php
// including footer file
include_once(JPATH_ROOT . "/templates/" . $this->template . '/lib/php/gk_footer.php');
?>
</div>
</div>
</div>
<?php
// including information alert for IE6
if($this->params->get("ie6info", 1) == 1):
?>
<!-- IE6 alert -->
<div id="ie6">
<?php include_once(JPATH_ROOT."/templates/".$this->template.'/lib/php/gk_ie6.php'); ?>
</div>
<?php endif; ?>
<jdoc:include type="modules" name="debug" />
</body>

Where do I have to insert the div id "bkg_advert" ?? At the top? Right?
Thank you very very much!