On Mon, Nov 16, 2009 at 7:37 AM, John Franks <[email protected]> wrote:
> Ok, thanks everyone for your help. I am nearly there - Please note that using
> seperate images is not an option. I need to learn this background-positioning
> technique.
>
> The updated “back to top” image/link in the footer of the site can now be
> seen at www.euro-peanflooring.co.uk. You can see that now the “a” letters are
> used within the image/link. And as I hover over the “a” letters I get my
> intended result (only within the “a” text area). But when I remove the “a”
> letters then the whole thing breaks. So I need to remove the “a” letters and
> then when hovering over, I still need the image position to change
> successfully.
>
> Are there any further ideas?
>
>
> My updated HTML code:
> <div id="footer"><div id="backToTop"><a href="#pageTop"
> class="backToTop">aaaaa</a></div></div>
>
>
> My updated CSS code:
> #footer {
> background-image: url(../images/footerBackground.gif);
> height: 350px;
> position: relative;
> }
> #footer #backToTop {
> width: 89px;
> height: 78px;
> display: block;
> margin-left: 16px;
> margin-top: 26px;
> position: absolute;
> background: url(../images/backToTop.png) no-repeat left bottom;
> }
> #footer #backToTop a.backToTop, #footer #backToTop a.backToTop:link, #footer
> #backToTop a.backToTop:visited {
> background: url(../images/backToTop.png) no-repeat left bottom;
> }
> #footer #backToTop a.backToTop:hover, #footer #backToTop a.backToTop:active {
> background: url(../images/backToTop.png) no-repeat left top;
> }
#footer {
background-image: url(../images/footerBackground.gif);
height: 350px;
position: relative;
}
#footer #backToTop {
width: 89px;
height: 78px;
display: block;
margin-left: 16px;
margin-top: 26px;
position: absolute;
background: url(../images/backToTop.png) no-repeat left bottom;
}
#footer #backToTop:hover {
background: url(../images/backToTop.png) no-repeat left top;
}
#footer #backToTop a{
visibility: hidden;
}
That should accomplish what you're seeking.
--
-Jack Timmons
http://www.trotlc.com
Twitter: @codeacula
______________________________________________________________________
css-discuss [[email protected]]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
