Welcome to WebmasterWorld Guest from 54.226.143.14

Forum Moderators: phranque

Message Too Old, No Replies

Need help with image in background

How do I do this

   
12:51 am on May 22, 2004 (gmt 0)

10+ Year Member



I have the following code:

<table width="780" height="236" border="0" cellpadding="0" cellspacing="0" background="images/myimagehere.jpg">

I have text over top of this image, but the more text I type, if I go past a certain height (236) the image starts to repeat. What I would like it to do is stretch down with the text. Any ideas? Thanks in advance.

12:54 am on May 22, 2004 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member



The only thing you can do is make the image longer than any of you pages so the image never "runs out" - or make the image repeat seamlessly.
1:19 am on May 22, 2004 (gmt 0)

10+ Year Member



The problem is that I tried that and the image still repeats. Here is the entire table. Please help. It is very frustrating.

<table width="780" height="330" border="0" cellpadding="0" cellspacing="0">
<tr valign="top">
<td width="341" height="330"><img src="images/noname2.jpg" width="341" height="330"></td>
<td width="440" height="330" background="images/noname.jpg"><table width="95%" border="0" align="center" cellpadding="0" cellspacing="0">
<tr>
<td width="6%" height="70">&nbsp;</td>
<td width="13%">&nbsp;</td>
<td width="81%" class="title3">I WOULD LIKE SOME HELP</td>
</tr>
<tr>
<td>&nbsp;</td>
<td colspan="2" valign="top" class="bod"><span class="sub3">Lorem
ipsum dolor sit amet, consectetuer adipiscing elit</span><br>
<br>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam
nonummy nibh commodo consequat. Lorem ipsum dolor sit amet, consectetuer
adipiscing elit. Lorem ipsum dolor sit amet, consectetuer adipiscing
elit, sed diam nonummy nibh commodo consequat. <br>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Lorem
ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy
nibh commodo consequat. Lorem ipsum dolor sit amet, consectetuer
adipiscing elit. Lorem ipsum dolor sit amet, consectetuer adipiscing
elit, sed diam nonummy nibh commodo consequat. Lorem ipsum dolor
sit amet, consectetuer adipiscing elit. Lorem ipsum dolor sit amet,
consectetuer adipiscing elit, <br>
ipsum dolor sit amet, consectetuer adipiscing elit. Lorem ipsum
dolor sit amet, consectetuer adipiscing elit, Lorem ipsum dolor
sit amet, consectetuer adipiscing elit, sed diam nonummy nibh commodo
consequat. Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam
nonummy nibh</td>
</tr>
</table></td>
</tr>
</table>

1:50 am on May 22, 2004 (gmt 0)

10+ Year Member



I used to have one on my site. You use a style sheet and add the class attribute in the cell that you want the background. So your style sheet would be:

.bg {
background-image: url(images/whatver.jpg);
background-repeat: no repeat;
}

and you link the style sheet:

<link rel="stylesheet" href="style.css">

and you table cell would be:

<td class="bg">

2:34 am on May 22, 2004 (gmt 0)

10+ Year Member



How do I format that to fit where the current images are placed. I have a little understanding of .css, but mostly test based. Thanks again.
1:04 pm on May 22, 2004 (gmt 0)

10+ Year Member



Ok I looked over your sample code a little more carefully. You referenced a <td class="bod"> in your sample code. In your case:

.bod {
:::whatever you already have:::
background-image: url(images/noname.jpg);
background-position : top left;
backgound-repeat: no-repeat;
}

Try this.

2:24 pm on May 22, 2004 (gmt 0)

10+ Year Member



Thanks, it is almost there, but the image still repeats using that code. Anything else? It is a small news header image that I would rather just have either stretch from or not repeat.
<table width="780" height="330" border="0" cellpadding="0" cellspacing="0">
<tr valign="top">
<td width="341" height="330"><img src="images/leftimage.jpg" width="341" height="330"></td>
<td width="440" height="330" ><table width="100%" border="0" align="center" cellpadding="0" cellspacing="0">
<tr>
<td colspan="" align="left" valign="top" class="bod"><p><span class="sub3">Lorem
ipsum dolor sit amet, consectetuer adipiscing elit</span><br>
<br>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed
diam nonummy nibh commodo consequat. Lorem ipsum dolor sit amet,
consectetuer adipiscing elit. Lorem ipsum dolor sit amet, consectetuer
adipiscing elit, sed diam nonummy nibh commodo consequat. <br>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Lorem
ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy
nibh commodo consequat. Lorem ipsum dolor sit amet, consectetuer
adipiscing elit. Lorem ipsum dolor sit amet, consectetuer adipiscing
elit, sed diam nonummy nibh commodo consequat. Lorem ipsum dolor
sit amet, consectetuer adipiscing elit. Lorem ipsum dolor sit
amet, consectetuer adipiscing elit, <br>
ipsum dolor sit amet, consectetuer adipiscing elit. Lorem ipsum
dolor sit amet, consectetuer adipiscing elit, Lorem ipsum dolor
sit amet, consectetuer adipiscing elit, sed diam nonummy nibh
commodo consequat. Lorem ipsum dolor sit amet, consectetuer adipiscing
elit. Lorem ipsum dolor sit amet, consectetuer adipiscing elit,
sed diam nonummy nibh</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p></td>
</tr>
</table></td>
</tr>
</table>
2:24 pm on May 22, 2004 (gmt 0)

10+ Year Member



Thanks, it is almost there, but the image still repeats using that code. Anything else? It is a small news header image that I would rather just have either stretch from or not repeat.
<table width="780" height="330" border="0" cellpadding="0" cellspacing="0">
<tr valign="top">
<td width="341" height="330"><img src="images/leftimage.jpg" width="341" height="330"></td>
<td width="440" height="330" ><table width="100%" border="0" align="center" cellpadding="0" cellspacing="0">
<tr>
<td colspan="" align="left" valign="top" class="bod"><p><span class="sub3">Lorem
ipsum dolor sit amet, consectetuer adipiscing elit</span><br>
<br>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed
diam nonummy nibh commodo consequat. Lorem ipsum dolor sit amet,
consectetuer adipiscing elit. Lorem ipsum dolor sit amet, consectetuer
adipiscing elit, sed diam nonummy nibh commodo consequat. <br>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Lorem
ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy
nibh commodo consequat. Lorem ipsum dolor sit amet, consectetuer
adipiscing elit. Lorem ipsum dolor sit amet, consectetuer adipiscing
elit, sed diam nonummy nibh commodo consequat. Lorem ipsum dolor
sit amet, consectetuer adipiscing elit. Lorem ipsum dolor sit
amet, consectetuer adipiscing elit, <br>
ipsum dolor sit amet, consectetuer adipiscing elit. Lorem ipsum
dolor sit amet, consectetuer adipiscing elit, Lorem ipsum dolor
sit amet, consectetuer adipiscing elit, sed diam nonummy nibh
commodo consequat. Lorem ipsum dolor sit amet, consectetuer adipiscing
elit. Lorem ipsum dolor sit amet, consectetuer adipiscing elit,
sed diam nonummy nibh</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p></td>
</tr>
</table></td>
</tr>
</table>
7:53 pm on May 22, 2004 (gmt 0)

10+ Year Member



I just tested the code I gave you and it works here in IE but not in Mozilla or Firefox. So there you have it. That must be new because it worked before, for sure. Sorry I couldn't help you. The other thing I do is keep a standard length on all my pages.
 

Featured Threads

Hot Threads This Week

Hot Threads This Month