...

View Full Version : Table Cell Image Background (help please)



MichaelBowler
07-15-2004, 03:59 PM
Hi people I have put an image as a baground for a table cell but the image is tiled and I want it to strech heres the code for what I have done so far:
<table border="1" cellpadding="0" cellspacing="0" style="border-collapse: collapse" bordercolor="#111111" width="349" height="150">
<tr>
<td width="349" height="150" background="image.gif">
</td>
</tr>
</table>Can anyone please help me?
Thanks to anyone that helps.

MichaelBowler
07-15-2004, 04:49 PM
OK then people just ignore me

Number_Nineteen
07-15-2004, 04:52 PM
You cannot do this with a TD background. Since you put this question in a Javascript forum, I'll show you a Javascript example ;) There isn't a method for assigning sizes to an image that is going to be used as a background image. You'll notice I even created an image in Javascript that has the sizes defined and it is ignored by the TD and DIV.

http://staging.paragraphinc.com/imageBGtest.htm



<script language="JavaScript">
function loadImage() {
var theImage = new Image(150,349);
theImage.src = "http://www.google.com/images/logo.gif";
// Set the Image tag source
theIMG.src = theImage.src;
// Set the TD bg image
theTD.style.backgroundImage = "url(" + theImage.src + ")";
// Set the DIV bg image
theDIV.style.backgroundImage = "url(" + theImage.src + ")";
}
</script>

Number_Nineteen
07-15-2004, 04:53 PM
You weren't ignored... you didn't post this in the correct forum.

MichaelBowler
07-15-2004, 05:02 PM
OK then I apologise to everyone that was offended by my second post in this thread.

MichaelBowler
07-15-2004, 05:42 PM
Can you explain this script in more detail? Please...
<script language="JavaScript">
function loadImage() {
var theImage = new Image(150,349);
theImage.src = "http://www.google.com/images/logo.gif";
theIMG.src = theImage.src;
theTD.style.backgroundImage = "url(" + theImage.src + ")";
theDIV.style.backgroundImage = "url(" + theImage.src + ")";
}
</script>And does theTD in this part of code refer to an ID or Class?
theTD.backgroundImage = "url(" + theImage.src + ")";And thanks again to anyone that does help...
And how do you apply this script to a TD?

MichaelBowler
07-15-2004, 06:23 PM
Your script isn't working for me :confused: ...
l'll post the code in a minute.

SpiritualStorms
07-15-2004, 07:36 PM
<script language="JavaScript">
function loadImage() {
var theImage = new Image(150,349);
theImage.src = "http://www.google.com/images/logo.gif";
// Set the Image tag source
theIMG.src = theImage.src;
// Set the TD bg image
theTD.style.backgroundImage = "url(" + theImage.src + ")";
// Set the DIV bg image
theDIV.style.backgroundImage = "url(" + theImage.src + ")";
}
</script>

Maybe it isnt working because of the line in green? I see no variable by the name of theIMG, but i do see one by the name of theImage.

MichaelBowler
07-15-2004, 08:37 PM
So how would you sort that then?

gohankid77
07-15-2004, 09:03 PM
Um... Try this:



<script language="JavaScript">
function loadImage() {
var theImage = new Image(150,349);
theImage.src = "http://www.google.com/images/logo.gif";
theIMG.src = theImage.src;
theTD.style.backgroundImage = "url(theImage.src)";
theDIV.style.backgroundImage = "url(theImage.src)";
}
</script>


or:



<script language="JavaScript">
function loadImage() {
var theImage = new Image(150,349);
theImage.src = "http://www.google.com/images/logo.gif";
var theIMG = theImage.src;
theTD.style.backgroundImage = "url(theIMG)";
theDIV.style.backgroundImage = "url(theIMG)";
}
</script>

SpiritualStorms
07-16-2004, 12:09 PM
Funny, but for IE, you do need to specifically say var inorder for IE to understand that something is a variable, as opposed to a value. I've noticed that some times it will give me object undefined, whenever i created a variable without the key word. It's annoying.

Kor
07-16-2004, 12:27 PM
I've noticed that some times it will give me object undefined, whenever i created a variable without the key word. It's annoying.


I don't think so. You might have had another type of mistakes, such as choosing reserved words as variable names or giving the same name for a variable and for an object's name or id.

In fact variables can be

1. local
var blah = ...
2. global
blah = ...

So this is the 'mistery' for using somethimes with sometimes without var specification

MichaelBowler
07-16-2004, 12:40 PM
Um... Try this:



<script language="JavaScript">
function loadImage() {
var theImage = new Image(150,349);
theImage.src = "http://www.google.com/images/logo.gif";
theIMG.src = theImage.src;
theTD.style.backgroundImage = "url(theImage.src)";
theDIV.style.backgroundImage = "url(theImage.src)";
}
</script>


or:



<script language="JavaScript">
function loadImage() {
var theImage = new Image(150,349);
theImage.src = "http://www.google.com/images/logo.gif";
var theIMG = theImage.src;
theTD.style.backgroundImage = "url(theIMG)";
theDIV.style.backgroundImage = "url(theIMG)";
}
</script>
Sorry its still not working :confused:

glenngv
07-16-2004, 12:58 PM
Hi people I have put an image as a baground for a table cell but the image is tiled and I want it to strech heres the code for what I have done so far:
<table border="1" cellpadding="0" cellspacing="0" style="border-collapse: collapse" bordercolor="#111111" width="349" height="150">
<tr>
<td width="349" height="150" background="image.gif">
</td>
</tr>
</table>Can anyone please help me?
Thanks to anyone that helps.
AFAIK, you can't stretch a backgound image. You can only make it not tiled and position it somewhere.

<table border="1" width="100%">
<tr>
<td style="background:url(image.gif) no-repeat center">The backgound image is in the center of this cell</td>
</tr>
</table>

MichaelBowler
07-16-2004, 03:02 PM
AFAIK, you can't stretch a backgound image. You can only make it not tiled and position it somewhere.

<table border="1" width="100%">
<tr>
<td style="background:url(image.gif) no-repeat center">The backgound image is in the center of this cell</td>
</tr>
</table>Not working Glenn mate :confused:
Maybe my Internet Explorer is sh*t.

SpiritualStorms
07-17-2004, 10:44 AM
You want me to explain IE? Listen, i dont know enough about programming to know all the ins, and outs, but i have gotten errors simply because the term var was not included in the friggin script.


I don't think so. You might have had another type of mistakes, such as choosing reserved words as variable names or giving the same name for a variable and for an object's name or id.

In fact variables can be

1. local
var blah = ...
2. global
blah = ...

So this is the 'mistery' for using somethimes with sometimes without var specification

Willy Duitt
07-17-2004, 11:42 AM
It should work....

But as Glenn pointed out, you can not stretch a background image. If you want to stretch the image you will need to place an image tag within the data cell, stretch that to fit the size of the cell and then using z-index position your text on top of that....

Background Example:


<style type="text/css">
<!--
table { background:#000000;
border:10px;
border-style: solid;
border-color: #0000FF #FF0000;
margin:none;
padding:none;
width:100%;
}

td { background:#000000;
background-image:url(http://www.journalofantiques.com/images12/Monkey.jpg);
background-repeat:no-repeat;
background-position:center center;
background-attachment:fixed;
color:#FFFFFF;
width:349px;
height:450px;
}
-->
</style>
</head>

<body>
<table>
<tr>
<td>&nbsp;</td>
</tr>
</table>


.....Willy

BTW: Although your example shows text within the data cell, it should be pointed out that without anything in the cell the cell will collapse and the background will not show. Therefore be sure that you at least hard code a non-breaking space ( &nbsp; ) and define the cells width and height....

M1k3-+i3
07-17-2004, 01:46 PM
Thats good that is its just what I have been looking for :)
A question tho how do i make the background color tranparent?
Because I know you can specify a background picture and color at the same time

M1k3-+i3
07-17-2004, 03:52 PM
Doesn't matter I have sussed it out :D



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum