Actions

Difference between revisions of "Creating clickable background images using CSS"

From Joomla! Documentation

m (None)
Line 2: Line 2:
  
 
Okay, lets say you have a mostly finished template, with a typical corporate layout: A header, a content body area, and a footer. In the header you have placed a background image with a big company logo and some nice artwork next to it, with some dynamic content on top of the bottom right corner of the background image.
 
Okay, lets say you have a mostly finished template, with a typical corporate layout: A header, a content body area, and a footer. In the header you have placed a background image with a big company logo and some nice artwork next to it, with some dynamic content on top of the bottom right corner of the background image.
Suddenly you realise that a click on the company logo part of that background image should bring the user back to the homepage. Usually you would cut out the image and place it directly inside the link. However you don't have enough time to cut up the image and re-work your template accordingly, so what you need is a quick-fix.
+
Suddenly you realise that a click on the company logo part of that background image <span class="plainlinks">[http://www.thepiggybackrider.com/ <span style="color:black;font-weight:normal; text-decoration:none!important; background:none!important; text-decoration:none;/*CITATION*/">kid carrier</span>]</span> should bring the user back to the homepage. Usually you would cut out the image and place it directly inside the link. However you don't have enough time to cut up the image and re-work your template accordingly, so what you need is a quick-fix.
  
 
At this point your HTML structure might look something like this:
 
At this point your HTML structure might look something like this:
<pre>
+
&lt;pre>
<div id="site">
+
&lt;div id="site">
     <div id="full-width-header">
+
     &lt;div id="full-width-header">
         <div id="header-content">We love using Joomla!</div>
+
         &lt;div id="header-content">We love using Joomla!&lt;/div>
     </div>
+
     &lt;/div>
     <div id="body-content">OSM saves the world!</div>
+
     &lt;div id="body-content">OSM saves the world!&lt;/div>
     <div id="footer-content">(c) the really cool web-designer</div>
+
     &lt;div id="footer-content">(c) the really cool web-designer&lt;/div>
</div>
+
&lt;/div>
</pre>
+
&lt;/pre>
  
 
And your CSS like this:
 
And your CSS like this:
<pre>
+
&lt;pre>
 
#full-width-header {
 
#full-width-header {
 
     background: url(header-logo.jpg);
 
     background: url(header-logo.jpg);
Line 30: Line 30:
 
     text-align: right;
 
     text-align: right;
 
}
 
}
</pre>
+
&lt;/pre>
  
 
Note: Legitimate uses for the following technique might include things like tab-interfaces where the tabs should be able to stretch and still have a background image, or blog-skins which only differ in CSS.
 
Note: Legitimate uses for the following technique might include things like tab-interfaces where the tabs should be able to stretch and still have a background image, or blog-skins which only differ in CSS.
Line 41: Line 41:
  
 
Example 1 (pre CSS 2.1) HTML:
 
Example 1 (pre CSS 2.1) HTML:
<pre>
+
&lt;pre>
<div id="site">
+
&lt;div id="site">
     <div id="full-width-header">
+
     &lt;div id="full-width-header">
         <a href="/"><img src="transparent.gif" id="home-link" alt="Nav: Home" /></a>
+
         &lt;a href="/">&lt;img src="transparent.gif" id="home-link" alt="Nav: Home" />&lt;/a>
         <div id="header-content">We love using Joomla!</div>
+
         &lt;div id="header-content">We love using Joomla!&lt;/div>
     </div>
+
     &lt;/div>
     <div id="body-content">OSM saves the world!</div>
+
     &lt;div id="body-content">OSM saves the world!&lt;/div>
     <div id="footer-content">(c) the really cool web-designer</div>
+
     &lt;div id="footer-content">(c) the really cool web-designer&lt;/div>
</div>
+
&lt;/div>
</pre>
+
&lt;/pre>
  
 
Example 1 (pre CSS 2.1) CSS:
 
Example 1 (pre CSS 2.1) CSS:
<pre>
+
&lt;pre>
 
#full-width-header {
 
#full-width-header {
 
     position: relative; /* necassary to
 
     position: relative; /* necassary to
Line 78: Line 78:
 
     text-align: right;
 
     text-align: right;
 
}
 
}
</pre>
+
&lt;/pre>
  
  
 
Example 2 (CSS 2.1) HTML:
 
Example 2 (CSS 2.1) HTML:
<pre>
+
&lt;pre>
<div id="site">
+
&lt;div id="site">
     <div id="full-width-header">
+
     &lt;div id="full-width-header">
         <a href="/" id="home-link">Home</a>
+
         &lt;a href="/" id="home-link">Home&lt;/a>
         <div id="header-content">We love using Joomla!</div>
+
         &lt;div id="header-content">We love using Joomla!&lt;/div>
     </div>
+
     &lt;/div>
     <div id="body-content">OSM saves the world!</div>
+
     &lt;div id="body-content">OSM saves the world!&lt;/div>
     <div id="footer-content">(c) the really cool web-designer</div>
+
     &lt;div id="footer-content">(c) the really cool web-designer&lt;/div>
</div>
+
&lt;/div>
</pre>
+
&lt;/pre>
  
 
Example 2 (CSS 2.1) CSS:
 
Example 2 (CSS 2.1) CSS:
<pre>
+
&lt;pre>
 
#full-width-header {
 
#full-width-header {
 
     position: relative; /* necassary to
 
     position: relative; /* necassary to
Line 121: Line 121:
 
     text-align: right;
 
     text-align: right;
 
}
 
}
</pre>
+
&lt;/pre>
  
 
[[Category:Tutorials]][[Category:Templates]]
 
[[Category:Tutorials]][[Category:Templates]]

Revision as of 13:47, 26 September 2011

What this is about

Okay, lets say you have a mostly finished template, with a typical corporate layout: A header, a content body area, and a footer. In the header you have placed a background image with a big company logo and some nice artwork next to it, with some dynamic content on top of the bottom right corner of the background image. Suddenly you realise that a click on the company logo part of that background image kid carrier should bring the user back to the homepage. Usually you would cut out the image and place it directly inside the link. However you don't have enough time to cut up the image and re-work your template accordingly, so what you need is a quick-fix.

At this point your HTML structure might look something like this: <pre> <div id="site">

   <div id="full-width-header">
       <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> </pre>

And your CSS like this: <pre>

  1. full-width-header {
   background: url(header-logo.jpg);
   width: 800px;
   height: 172px;

}

  1. header-content {
   position: relative;
   float: right;
   width: 400px;
   height: 172px;
   vertical-align: bottom;
   text-align: right;

} </pre>

Note: Legitimate uses for the following technique might include things like tab-interfaces where the tabs should be able to stretch and still have a background image, or blog-skins which only differ in CSS.

How to do it

First: You can't just copy the #header-content div, position it over the logo, make the content invisible and enclose it in an anchor-tag. That would be broken HTML, because you can't place block-level elements like div inside anchor tags.

You can however enclose a stretched, one-pixel, transparent GIF image in anchor tags (as per example one) if you have to support old browsers. Otherwise you can simply turn the anchor itself into an inline-block using CSS 2.1 (as per example two).

Example 1 (pre CSS 2.1) HTML: <pre> <div id="site">

   <div id="full-width-header">
       <a href="/"><img src="transparent.gif" id="home-link" alt="Nav: 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> </pre>

Example 1 (pre CSS 2.1) CSS: <pre>

  1. 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;

}

  1. home-link {
   position: absolute;
   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;

}

  1. header-content {
   position: relative;
   float: right;
   width: 400px;
   height: 172px;
   vertical-align: bottom;
   text-align: right;

} </pre>


Example 2 (CSS 2.1) HTML: <pre> <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> </pre>

Example 2 (CSS 2.1) CSS: <pre>

  1. 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;

}

  1. 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;

}

  1. header-content {
   position: relative;
   float: right;
   width: 400px;
   height: 172px;
   vertical-align: bottom;
   text-align: right;

} </pre>