SitePoint Sponsor

User Tag List

Results 1 to 3 of 3
  1. #1
    SitePoint Enthusiast
    Join Date
    Jun 2008
    Posts
    44
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Multiple backgrounds

    How can i add more background images in my css style?
    here is preview http://www.pmob.co.uk/search-this/scroll11.htm
    as you i only have one but need more for when other images are being hovered over
    img_a.gif (active)
    img_h.gif (hover)



    Code HTML4Strict:
      <p><div id="outer">
    	<div class="fade">
    		<div class="wrap">
    			<ul>
    			  <li><a href="#"><img src="images/img_a.gif" alt="" width="160" height="71" /></a></li>
    			  <li><a href="#.html"><img src="images/img_a.gif" width="160" height="71" alt="" /></a></li>
                              <li><a href="#"><img src="images/img_a.gif" width="160" height="71" alt=""/></a></li>
    			</ul>
    		</div>
    		<p class="lfade"></p>
    		<p class="rfade"></p>
    		</div>

    Code CSS:
    * {
    	margin:0;
    	padding:0
    }
    img{
    	display:block
    }/* add display:block to remove image underline*/
    a    img {
    	color: #ccc;
    	border: 0px;
    }
     
     
    #outer{
    	width:620px;
    	margin:auto;
    	position:relative;
    	background:#809900;
    	background-color: #F3F3F3;
    	margin-left: 25px;
    }
    ul{
    	list-style:none;
    	padding:3px;
    	/*width:980px; width removed */
    }
    .wrap {
    	width: 620px;
    	overflow: auto;
    	padding-bottom:20px;
    	white-space:nowrap;
    	position:relative;
    	z-index:1;
    	background-color: #F3F3F3;
    	height: 97px;
    	border-top: 3px solid #C3C3C3;
    }
    .wrap ul{
    	padding:3px 25px;
    }
    .wrap li {
    	margin:0 10px;
    	text-align:center;
    	display:-moz-inline-box; /* gecko*/
    	display:inline-block;/* opera and safari*/
    	padding:5px;
    	margin:5px;
    }
    .wrap li a,.wrap li a span{
    	width:160px;
    	display:block;
    }
    .wrap li a{
    	background:url(../../images/img_h.gif) no-repeat 0 0;
    	font-size:77&#37;;
    	width: 160px;
    	height: 71px;
    	color: #F3F3F3;
    }
     
    .wrap li a:hover{visibility:visible}
     
    .wrap li a:hover img{visibility:hidden}
     
    .fade{
    	width:430px;
    	position:relative;
    	z-index:1;
    }
    .fade .lfade,
    .fade .rfade{
    	position:absolute;
    	top:0px;
    	width:60px;
    	height:118px;
    	z-index:999;
    	left: 536px;
    	background: url(../../images/right-fade.png);
    }
    .fade .lfade{
    	left:-24px;
    	background:url(../../images/left-fade.png) no-repeat 100% 0;
    }

    thanks

  2. #2
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,556
    Mentioned
    183 Post(s)
    Tagged
    6 Thread(s)
    Hi,

    I'm not clear about what you want to do exactly.

    If you want a different image to show on hover for each item then just add a class to each item and apply a different image.

    e.g.
    Code:
    .wrap li.firstimage a{
        background:url(images/first-image-over.jpg) no-repeat 0 0;
        font-size:77&#37;
    }
    
    .wrap li.secondimage a{
        background:url(images/second-image-over.jpg) no-repeat 0 0;
        font-size:77%
    }
    Code:
    <ul>
    <li class="firstimage"><a href=" etc....
    <li class="secondimage"><a href=" etc.....
    If you were talking about having different images for the different states for hover and active then you would be better off using a composite image (all states contained in one image) and changing the background-position rather than revealing a single image. Here's an example that uses that method although it only swaps one image it could swap another image on active by changing the background position to reveal the new image..

  3. #3
    SitePoint Enthusiast
    Join Date
    Jun 2008
    Posts
    44
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    thanks
    your first method just what i was looking for.


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •