View Single Post
  #1 (permalink)  
Old Mar 2nd, 2008, 20:50
Oak's Avatar
Oak Oak is offline
SuperMember

SuperMember
Join Date: Dec 2007
Location: London
Age: 35
Posts: 288
Thanks: 6
Thanked 0 Times in 0 Posts
css background img .. not so easy it seems?

I know how to add images/background images, but in this situation the hover efect has thrown me!..having problems.

If you take a look at this page you will find the css included, I will create separate doc once the page is done.

http://www.capoeiracanal.co.uk/index-home.php

The code bellow shows 2 ways in which an image has been added, for both methods I can's see how can I repeat it for a different img?

line 85-91

HTML: Select all
#hoverpage ul#outer li div em {display:block; width:190px; height:300px; float:left; background:transparent url(img/current5.gif) no-repeat; margin-right:10px;}

#hoverpage ul#outer li.p1 div em {background-position: 21px 25px;}
#hoverpage ul#outer li.p2 div em {background-position: 21px 50px;}
#hoverpage ul#outer li.p3 div em {background-position: 21px 75px;}
#hoverpage ul#outer li.p4 div em {background-position: 21px 100px;}
#hoverpage ul#outer li.p5 div em {background-position: 21px 125px;}


HTML: Select all
 #hoverpage ul#outer li div img {border:1px solid #888; float:left; margin: 0px 0px 0px -225px;}
then applying this to the html page.

HTML: Select all
<img src="img/Map2.jpg" alt="Map of Capoeira Canal's studio locations"/>
(I have just edited this post in the hope that I have made myself question clearer)

Thanks

Last edited by Oak; Mar 4th, 2008 at 19:42.
Reply With Quote