Background Image (Easy)
Sat Jun 11, 2005 10:34 pm
It's probably an extremely easy question for you guys, but not for me... Anyway.. I've made a 100% Photoshop (all images) website and I've sliced into about 23 slices (images). The problem is, 2 of the images is supposed to be the 'menu' and the 'content box'. How do you make the 'menu' and 'content box' a background image thus allowing text to be typed over it?
Sun Jun 12, 2005 1:06 am
well first make sure the width(or height) of the table cell is the same as the image your goign to use as your backgournd. then just go: <td background="URL"
pretty simple huh?
pretty simple huh?
Sun Jun 12, 2005 1:23 am
How can you make it fixed? So when you type into much text the background won't move.
Sun Jun 12, 2005 1:42 am
Artist wrote:How can you make it fixed? So when you type into much text the background won't move.
<td background="URL" width="image width" height="image height"
I believe.
Sun Jun 12, 2005 1:58 am
Sun Jun 12, 2005 6:37 am
What I would do is just use a div layer. It makes an invisible text box over the image so that you don't have to worry about stretching the table or moving the image around. Here is the code for it:
What I did was I made the div layer slightly smaller than your cell so that it wouldn't stretch out the table. And the "overflow:auto" makes it scroll as soon as you get content in there that is too big for the box.
The same goes for your content box.
Let me know if it works for you.
- Code:
<td colspan="3"> <img src="images/menu.gif" alt="" height="399"
width="138"><div style="width:136px; height:397px; overflow:auto;">
Menu goes here. Menu goes here. Menu goes here. Menu goes here.
</div></td>
What I did was I made the div layer slightly smaller than your cell so that it wouldn't stretch out the table. And the "overflow:auto" makes it scroll as soon as you get content in there that is too big for the box.
The same goes for your content box.
- Code:
<td colspan="7" rowspan="2"> <img src="images/content.gif" alt="" height="402" width="509"><div style="width:507px; height:400px; overflow:auto;">
Content goes here. Content goes here. Content goes here. Content goes here.
</div></td>
Let me know if it works for you.
Sun Jun 12, 2005 11:04 am
Doesn't work. 
Can you try saving my website and putting the code where it belongs? Maybe I'm just doing this wrong.
Can you try saving my website and putting the code where it belongs? Maybe I'm just doing this wrong.
Mon Jun 13, 2005 3:21 am
Open up the source file for your webpage.
Then hit CTRL+F and enter in "menu" for the menu line. Then copy and paste what I gave you up there ^ over the menu cell. Do the same for the content line.
I went and did it for you, but I haven't checked to see if it works.
Then hit CTRL+F and enter in "menu" for the menu line. Then copy and paste what I gave you up there ^ over the menu cell. Do the same for the content line.
I went and did it for you, but I haven't checked to see if it works.
- Code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>lay</title>
<meta http-equiv="Content-Type"
content="text/html; charset=iso-8859-1">
</head>
<body leftmargin="0" topmargin="0" bgcolor="#ffffff" marginheight="0"
marginwidth="0">
<!-- ImageReady Slices (lay.psd) -->
<table border="0" cellpadding="0" cellspacing="0" width="700">
<tbody>
<tr>
<td colspan="14"> <img src="images/lay_01.gif" alt=""
height="132" width="700"></td>
<td> <img src="images/spacer.gif" alt="" height="132" width="1"></td>
</tr>
<tr>
<td rowspan="5"> <img src="images/lay_02.gif" alt="" height="518"
width="23"></td>
<td> <a href="http://www.sparkedpixels.com"> <img
src="images/lay_03.gif" alt="" border="0" height="20" width="79"></a></td>
<td rowspan="2"> <img src="images/lay_04.gif" alt="" height="54"
width="9"></td>
<td colspan="3"> <a href="about.html"> <img
src="images/lay_05.gif" alt="" border="0" height="20" width="96"></a></td>
<td rowspan="2"> <img src="images/lay_06.gif" alt="" height="54"
width="6"></td>
<td> <a href="resources.html"> <img src="images/lay_07.gif"
alt="" border="0" height="20" width="126"></a></td>
<td rowspan="2"> <img src="images/lay_08.gif" alt="" height="54"
width="15"></td>
<td> <a href="generaltutorials.html"> <img
src="images/lay_09.gif" alt="" border="0" height="20" width="161"></a></td>
<td rowspan="2"> <img src="images/lay_10.gif" alt="" height="54"
width="9"></td>
<td colspan="2"> <a href="generaltutorials.html"> <img
src="images/lay_11.gif" alt="" border="0" height="20" width="161"></a></td>
<td rowspan="5"> <img src="images/lay_12.gif" alt="" height="518"
width="15"></td>
<td> <img src="images/spacer.gif" alt="" height="20" width="1"></td>
</tr>
<tr>
<td> <img src="images/lay_13.gif" alt="" height="34" width="79"></td>
<td colspan="3"> <img src="images/lay_14.gif" alt="" height="34"
width="96"></td>
<td> <img src="images/lay_15.gif" alt="" height="34" width="126"></td>
<td> <img src="images/lay_16.gif" alt="" height="34" width="161"></td>
<td colspan="2"> <img src="images/lay_17.gif" alt="" height="34"
width="161"></td>
<td> <img src="images/spacer.gif" alt="" height="34" width="1"></td>
</tr>
<tr>
<td colspan="3"> <img src="images/menu.gif" alt="" height="399"
width="138"><div style="width:136px; height:397px; overflow:auto;">
Menu goes here. Menu goes here. Menu goes here. Menu goes here.
</div></td>
<td rowspan="3"> <img src="images/lay_19.gif" alt="" height="464"
width="5"></td>
<td colspan="7" rowspan="2"> <img src="images/content.gif" alt="" height="402" width="509"><div style="width:507px; height:400px; overflow:auto;">
Content goes here. Content goes here. Content goes here. Content goes here.
</div></td>
<td rowspan="3"> <img src="images/lay_21.gif" alt="" height="464"
width="10"></td>
<td> <img src="images/spacer.gif" alt="" height="399" width="1"></td>
</tr>
<tr>
<td colspan="3" rowspan="2"> <img src="images/lay_22.gif" alt=""
height="65" width="138"></td>
<td> <img src="images/spacer.gif" alt="" height="3" width="1"></td>
</tr>
<tr>
<td colspan="7"> <img src="images/lay_23.gif" alt="" height="62"
width="509"></td>
<td> <img src="images/spacer.gif" alt="" height="62" width="1"></td>
</tr>
<tr>
<td> <img src="images/spacer.gif" alt="" height="1" width="23"></td>
<td> <img src="images/spacer.gif" alt="" height="1" width="79"></td>
<td> <img src="images/spacer.gif" alt="" height="1" width="9"></td>
<td> <img src="images/spacer.gif" alt="" height="1" width="50"></td>
<td> <img src="images/spacer.gif" alt="" height="1" width="5"></td>
<td> <img src="images/spacer.gif" alt="" height="1" width="41"></td>
<td> <img src="images/spacer.gif" alt="" height="1" width="6"></td>
<td> <img src="images/spacer.gif" alt="" height="1" width="126"></td>
<td> <img src="images/spacer.gif" alt="" height="1" width="15"></td>
<td> <img src="images/spacer.gif" alt="" height="1" width="161"></td>
<td> <img src="images/spacer.gif" alt="" height="1" width="9"></td>
<td> <img src="images/spacer.gif" alt="" height="1" width="151"></td>
<td> <img src="images/spacer.gif" alt="" height="1" width="10"></td>
<td> <img src="images/spacer.gif" alt="" height="1" width="15"></td>
<td><br>
</td>
</tr>
</tbody>
</table>
<!-- End ImageReady Slices -->
</body>
</html>