PDA

View Full Version : How do I make a background jpg static and in a cell?

Cryton
11-16-2002, 01:29 PM
Hi all,

HTML and Java n00b here. Not entirely sure if what I want to do is possible, but any help would be appreciated.

I want to have a static background jpg on my website, so text will scroll over it, but the picture itself won't scroll. I have achieved this with this code:

<body>
<script language="JavaScript1.2">
if (document.all)
document.body.style.cssText="background:white url(MyFunkyLogo.jpg) no-repeat fixed center center"
</script>
</body>

Which works perfectly.

However, I only want the logo centered in the main cell of the table that makes up my webpage. So imagine a blank webpage and then create a table that is 3x3 cells big.

I only want my funky logo to be visible only in the centre cell, the centering of the logo should be with respect to the size and shape of the centre cell only, and for any text in the centre cell to scroll over the funky background picture without the picture itself scrolling.

Does anyone know if this is possible, and if it is how I achieve such a thing? The above code only works for the whole document, and I want to make it cell-specific.

Best wishes and thanks for your time
Steve/Cryton
Mr J
11-16-2002, 04:22 PM
Is this any good?




<table border="1" width=100% height="400">
<tr><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td>
<tr><td>&nbsp;</td><td style="background:white url(MyFunkyLogo.jpg) no-repeat fixed center center"></td><td>&nbsp;</td></tr>
<tr><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td></tr>
</table>
Cryton
11-16-2002, 10:37 PM
Hi. Thanks for your input, but unfortunately your code doesn't do what i require. Say for example I have three pages of text. Your code will centre the picture in the correct cell, but that cell will be huge, containing all the text.

I require scroll bars on the side of that cell, so the cell's size is set to roughly that of the pictures, and the text scrolls over the top of the picture without the picture moving.

The java code that I posted does this, but seems to apply the picture to the whole document, and I'm looking for a way to apply it to just a cell in a table.

Thanks again for your effort tho. (Perhaps I haven't explained what I require too well, but it is late and I must now sleep ;))
Ricky158
11-17-2002, 01:18 AM
i'm most likely no better at javascript than you, cryton, but i have a good suggestion.

what if you took your working code (for the entire page -- not the cell) and you stuck that in right after the "<td>" stuff? like this:


<table border="1" width=100% height="400">
<tr><td> </td><td> </td><td> </td>
<tr><td> </td><td><script language="JavaScript1.2">
if (document.all)
document.body.style.cssText="background:white url(MyFunkyLogo.jpg) no-repeat fixed center center"
</script></td><td> </td></tr>
<tr><td> </td><td> </td><td> </td></tr>
</table>


let me know if that does any good. ;)
gorilla1
11-17-2002, 01:41 PM
Ricky,
That works very nicely. I wonder is there a way to do this so that if you detect netscape, then you simply use the background such that text will not scroll over it.. For instance, the code below provides a cell background in NS4+. Then if you detect IE, you do the fixed background thing..
style="background-image:url('bgblue1.gif'); background-repeat: repeat-y; background-position: top center"

G
Mr J
11-17-2002, 02:08 PM
Please try this

Change epic1.gif for your image



<table border="1" width=100% height="350">
<tr height=20><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td>
<tr><td>&nbsp;</td><td width=600 style="background:url(epic1.gif) no-repeat fixed center center">
<div style=" width:600;height:350;overflow:auto">
<P>Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text
<P>Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text
<P>Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text
<P>Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text
<P>Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text
<P>Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text
<P>Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text
<P>Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text
<P>Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text
<P>Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text
<P>Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text
<P>Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text
<P>Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text
<P>Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text
<P>Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text
</div></td><td>&nbsp;</td></tr>
<tr height=20><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td></tr>
</table>