Click to See Complete Forum and Search --> : Non-Tiling Background within Table Cells??


Four_of_Five
06-27-2003, 01:17 PM
I pretty much know how to make page backgrounds become non-tiling/repeating...but is it possible to have them non-tiled within a table or within a cell??

What would be the code to insert?

Thanks in advance!

Jona
06-27-2003, 01:19 PM
http://www.w3.org/TR/CSS2/colors.html#propdef-background is the W3C reference to the background property, which can be used with TABLE (http://www.w3.org/TR/html401/struct/tables.html#edef-TABLE)s.

[Jona]

Charles
06-27-2003, 01:22 PM
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Example</title>
<style type="text/css">
<!--
table {background:url(http://www.bettiepage.com/images/photos/bikini/bikini16_a.jpg) no-repeat}
-->
</style>
<table summary="">
<tr>
<th>Heading</th>
<th>Heading</th>
<th>Heading</th>
</tr>
<tr>
<td>Data</td>
<td>Data</td>
<td>Data</td>
</tr>
<tr>
<td>Data</td>
<td>Data</td>
<td>Data</td>
</tr>
</table>

Four_of_Five
06-27-2003, 02:31 PM
Thanks for the link!

I still have to get back to my page and test those...but Charles code seems the most promising so far...however, does it place the image on the entire table?? I think i may need to place several non-tiled images within "cells" of tables...not only in one big table...

Anyhoo thanks again!

Jona
06-27-2003, 02:35 PM
Originally posted by Four_of_Five
I think i may need to place several non-tiled images within "cells" of tables...not only in one big table...

In that case, you would use:


<style type="text/css">
td {background: url("image.jpg") no-repeat;}
</style>


[Jona]

Four_of_Five
06-27-2003, 02:57 PM
Originally posted by Jona
In that case, you would use:


<style type="text/css">
td {background: url("image.jpg") no-repeat;}
</style>


[Jona]

Thanks Jona!

Hehehe ;)...i was just about figured it out that way too...you've just validated it...

ok, now does it follow that I'd have to "number" the cells?? if I want each cell to have a different background??? what if hmmm...if each of the cells were on different tables???

td1? td=2 hey, how do i know which td goes with a particular bg??
Ahhhrrrg.....more questions! :(

Sorry, i'm sooooo much a beginner at this CSS thing...it's im more of a JATF kinda gal...:rolleyes:

DaveSW
06-27-2003, 03:04 PM
You need to specify an ID for each cell. e.g.

<TD ID="td1">cell one</TD>
<TD ID="td2">cell two</TD>
<TD ID="td3">cell three</TD>

and in the css it's
<style type="text/css"> <!--
#td1 {background: url("image1.jpg") no-repeat;}
#td2 {background: url("image2.jpg") no-repeat;}
#td3 {background: url("image3.jpg") no-repeat;}
-->
</style>

Jona
06-27-2003, 03:06 PM
Originally posted by Four_of_Five
ok, now does it follow that I'd have to "number" the cells?? if I want each cell to have a different background??? what if hmmm...if each of the cells were on different tables???

For individual cells, you'd use the style attribute on each TD:


<TD STYLE="background: url(image.jpg) no-repeat;">


The code I posted above will set the background for TDs in all tables within that HTML document.

[Jona]

Jona
06-27-2003, 03:10 PM
Originally posted by DaveSW
You need to specify an ID for each cell.

Just to point out that you can also use CLASSES isntead of IDs, although it's best to use IDs, I thought I should point it out so that Four_of_Five knows about it as well:


<style type="text/css">
<!--
td.td1 {background: url("image1.jpg") no-repeat;}
td.td2 {background: url("image2.jpg") no-repeat;}
td.td3 {background: url("image3.jpg") no-repeat;}
-->
</style>
<!--The TDs-->
<td class="td1">First TD</td>
<td class="td2">Second TD</td>
<td class="td3">Third TD</td>


[Jona]