Using background images only once in a cell

[incraftfun]

On my home page, on the left hand navigation cell, I want to have that background image displayed only once so that it will fade to color #D5D5FF. Instead, as you can see, it is repeating the image. How can I get this image to display only once so that I get that fade effect?

Thanks for your help,
Alex

[flood6]

Probably the easiest way would be to imbed another table.

Change this:

<td width="15%" valign="top" height="100%" style="border-style: solid; border-width: 1" bgcolor="#D5D5FF" background="menu_d00dle.jpg">
        
          <p align="center">[img]images/nav_icf_home.gif[/img]</p>
          <p align="center"><a href="icf_store/">
          [img]images/nav_icf_store.gif[/img]</a></p>
          <p align="center"><a href="photo_gallery/">
          [img]images/nav_pht_glry.gif[/img]</a></p>

          <p align="center"><a href="uses/">
          [img]images/nav_uses_ideas.gif[/img]</a></p>
          <p align="center"><a href="contact/">
          [img]images/nav_contact_us.gif[/img]</a></p>
       
          <p align="center"><a href="aboutus/index.html">
          [img]images/nav_about_us.gif[/img]</a></p>
       
        </td>

To this:

<td>
  		<table background="menu_d00dle.jpg" style="border-style: solid; border-width: 1">
  			<tr>
  				<td>        
		          <p align="center">[img]images/nav_icf_home.gif[/img]</p>
		          <p align="center"><a href="icf_store/">
		          [img]images/nav_icf_store.gif[/img]</a></p>
		          <p align="center"><a href="photo_gallery/">
		          [img]images/nav_pht_glry.gif[/img]</a></p>
		
		          <p align="center"><a href="uses/">
		          [img]images/nav_uses_ideas.gif[/img]</a></p>
		          <p align="center"><a href="contact/">
		          [img]images/nav_contact_us.gif[/img]</a></p>
		       
		          <p align="center"><a href="aboutus/index.html">
		          [img]images/nav_about_us.gif[/img]</a></p>       
        		</td>
			</tr>
		</table>
	</td>

I think that should do it. Hope that was what you were looking for.

[benihana]

Probably the easiest way would be to imbed another table.

could not disagree more.

the best way to do this is to add to the CSS.

change this:

style="border-style: solid; border-width: 1" bgcolor="#D5D5FF" background="menu_d00dle.jpg"

to:

style="background-image:url(menu_d00dle.jpg); background-repeat:no-repeat; background-color:#D5D5FF; border:1px solid #000000;"


note make sure you remove the bgcolor and background= from the html, as the css will take care of this now.

good luck
ben

[eightfifteen]

benihana -

The problem with the CSS solution is that not all browsers will read that. Many older browsers don't recognize that code at all.

[flood6]

Probably the easiest way would be to imbed another table.

could not disagree more.

Really? You would have disagreed less if I told him that he could do it by putting a slice of cheese in his CD Rom? Just kiddin...

Both good points from benihana and eightfifteen.

[incraftfun]

Probably the easiest way would be to imbed another table.

could not disagree more.

the best way to do this is to add to the CSS.

change this:

style="border-style: solid; border-width: 1" bgcolor="#D5D5FF" background="menu_d00dle.jpg"

to:

style="background-image:url(menu_d00dle.jpg); background-repeat:no-repeat; background-color:#D5D5FF; border:1px solid #000000;"


note make sure you remove the bgcolor and background= from the html, as the css will take care of this now.

good luck
ben

OHMANOHMANOHMAN WOW
Thanks so much Ben. I really like the way it looks now. Just have to tweak the image so it fades more gradually.

Alex