LINK to background image

Everything to do with Joomla! 1.5 templates and templating.

Moderator: General Support Moderators

Forum rules
Forum Rules
Absolute Beginner's Guide to Joomla! <-- please read before posting, this means YOU.
Locked
mickysatig
Joomla! Enthusiast
Joomla! Enthusiast
Posts: 190
Joined: Thu Feb 19, 2009 10:58 am

LINK to background image

Post by mickysatig » Thu Sep 17, 2009 7:26 am

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 :laugh:

thanks in advance
micky
micky - twitter: @mickyrox86
have fun!

babberoo
Joomla! Enthusiast
Joomla! Enthusiast
Posts: 139
Joined: Wed Jan 23, 2008 5:35 pm

Re: LINK to background image

Post by babberoo » Thu Sep 17, 2009 4:22 pm

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
Joomla! Apprentice
Joomla! Apprentice
Posts: 40
Joined: Thu Dec 14, 2006 11:26 am
Location: Israel
Contact:

Re: LINK to background image

Post by elialum » Sat Sep 19, 2009 6:01 am

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;
}
| Joomla Hosting Israel | http://jetserver.co.il

mickysatig
Joomla! Enthusiast
Joomla! Enthusiast
Posts: 190
Joined: Thu Feb 19, 2009 10:58 am

Re: LINK to background image

Post by mickysatig » Mon Sep 21, 2009 11:09 am

Thanks a lot elialum and babberoo you rock!!
i could finally figure it out
micky - twitter: @mickyrox86
have fun!

elialum
Joomla! Apprentice
Joomla! Apprentice
Posts: 40
Joined: Thu Dec 14, 2006 11:26 am
Location: Israel
Contact:

Re: LINK to background image

Post by elialum » Mon Sep 21, 2009 12:13 pm

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.
| Joomla Hosting Israel | http://jetserver.co.il

ermand
Joomla! Intern
Joomla! Intern
Posts: 64
Joined: Sun Nov 01, 2009 9:42 pm

Re: LINK to background image

Post by ermand » Thu Mar 18, 2010 12:26 am

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
Joomla! Enthusiast
Joomla! Enthusiast
Posts: 139
Joined: Wed Jan 23, 2008 5:35 pm

Re: LINK to background image

Post by babberoo » Thu Mar 18, 2010 9:00 am

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
Joomla! Intern
Joomla! Intern
Posts: 64
Joined: Sun Nov 01, 2009 9:42 pm

Re: LINK to background image

Post by ermand » Thu Mar 18, 2010 5:50 pm

Thanks,

Got it.

omar2k
Joomla! Apprentice
Joomla! Apprentice
Posts: 13
Joined: Fri Dec 10, 2010 2:53 pm

Re: LINK to background image

Post by omar2k » Fri Dec 10, 2010 2:57 pm

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!
You do not have the required permissions to view the files attached to this post.

babberoo
Joomla! Enthusiast
Joomla! Enthusiast
Posts: 139
Joined: Wed Jan 23, 2008 5:35 pm

Re: LINK to background image

Post by babberoo » Fri Dec 10, 2010 3:07 pm

Can you post a link to the page?

omar2k
Joomla! Apprentice
Joomla! Apprentice
Posts: 13
Joined: Fri Dec 10, 2010 2:53 pm

Re: LINK to background image

Post by omar2k » Fri Dec 10, 2010 3:23 pm


omar2k
Joomla! Apprentice
Joomla! Apprentice
Posts: 13
Joined: Fri Dec 10, 2010 2:53 pm

Re: LINK to background image

Post by omar2k » Fri Dec 10, 2010 3:31 pm

are you able to see the page?

babberoo
Joomla! Enthusiast
Joomla! Enthusiast
Posts: 139
Joined: Wed Jan 23, 2008 5:35 pm

Re: LINK to background image

Post by babberoo » Fri Dec 10, 2010 5:03 pm

Nope. Is that a machine on your internal network?

omar2k
Joomla! Apprentice
Joomla! Apprentice
Posts: 13
Joined: Fri Dec 10, 2010 2:53 pm

Re: LINK to background image

Post by omar2k » Sat Dec 11, 2010 5:47 am

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

omar2k
Joomla! Apprentice
Joomla! Apprentice
Posts: 13
Joined: Fri Dec 10, 2010 2:53 pm

Re: LINK to background image

Post by omar2k » Mon Dec 13, 2010 1:22 pm

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
Joomla! Enthusiast
Joomla! Enthusiast
Posts: 139
Joined: Wed Jan 23, 2008 5:35 pm

Re: LINK to background image

Post by babberoo » Mon Dec 13, 2010 2:25 pm

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
Joomla! Apprentice
Joomla! Apprentice
Posts: 13
Joined: Fri Dec 10, 2010 2:53 pm

Re: LINK to background image

Post by omar2k » Mon Dec 13, 2010 2:31 pm

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

babberoo
Joomla! Enthusiast
Joomla! Enthusiast
Posts: 139
Joined: Wed Jan 23, 2008 5:35 pm

Re: LINK to background image

Post by babberoo » Mon Dec 13, 2010 2:48 pm

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

omar2k
Joomla! Apprentice
Joomla! Apprentice
Posts: 13
Joined: Fri Dec 10, 2010 2:53 pm

Re: LINK to background image

Post by omar2k » Mon Dec 13, 2010 2:55 pm

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

babberoo
Joomla! Enthusiast
Joomla! Enthusiast
Posts: 139
Joined: Wed Jan 23, 2008 5:35 pm

Re: LINK to background image

Post by babberoo » Mon Dec 13, 2010 3:06 pm

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
Joomla! Apprentice
Joomla! Apprentice
Posts: 13
Joined: Fri Dec 10, 2010 2:53 pm

Re: LINK to background image

Post by omar2k » Mon Dec 13, 2010 3:15 pm

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

babberoo
Joomla! Enthusiast
Joomla! Enthusiast
Posts: 139
Joined: Wed Jan 23, 2008 5:35 pm

Re: LINK to background image

Post by babberoo » Mon Dec 13, 2010 3:19 pm

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
Joomla! Apprentice
Joomla! Apprentice
Posts: 13
Joined: Fri Dec 10, 2010 2:53 pm

Re: LINK to background image

Post by omar2k » Mon Dec 13, 2010 3:27 pm

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
Joomla! Enthusiast
Joomla! Enthusiast
Posts: 139
Joined: Wed Jan 23, 2008 5:35 pm

Re: LINK to background image

Post by babberoo » Mon Dec 13, 2010 3:41 pm

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
Joomla! Apprentice
Joomla! Apprentice
Posts: 13
Joined: Fri Dec 10, 2010 2:53 pm

Re: LINK to background image

Post by omar2k » Mon Dec 13, 2010 3:48 pm

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
Joomla! Apprentice
Joomla! Apprentice
Posts: 13
Joined: Fri Dec 10, 2010 2:53 pm

Re: LINK to background image

Post by omar2k » Mon Dec 13, 2010 3:49 pm

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

babberoo
Joomla! Enthusiast
Joomla! Enthusiast
Posts: 139
Joined: Wed Jan 23, 2008 5:35 pm

Re: LINK to background image

Post by babberoo » Mon Dec 13, 2010 4:04 pm

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
Joomla! Apprentice
Joomla! Apprentice
Posts: 13
Joined: Fri Dec 10, 2010 2:53 pm

Re: LINK to background image

Post by omar2k » Mon Dec 13, 2010 4:08 pm

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

babberoo
Joomla! Enthusiast
Joomla! Enthusiast
Posts: 139
Joined: Wed Jan 23, 2008 5:35 pm

Re: LINK to background image

Post by babberoo » Mon Dec 13, 2010 4:23 pm

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
Joomla! Apprentice
Joomla! Apprentice
Posts: 13
Joined: Fri Dec 10, 2010 2:53 pm

Re: LINK to background image

Post by omar2k » Mon Dec 13, 2010 4:40 pm

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!


Locked

Return to “Templates for Joomla! 1.5”