Niodelad rambakgrund
För att göra en sådan här bakgrund måste man först göra en ram som man delar i nio bitar. Så här ser de bitar som jag har använt på den här sidan ut: (Högerklicka och spara om du vill använda dessa.)
I rutan nedan ser du koden för den här sidan. Du kan ladda ner en fil med koden här.
Där jag har markerat med rött måste du ändra till namn, bredd och höjd på dina bakgrundsbilder.
Där jag har markerat med blått kan du också ändra om du vill.
- Ändra #675670 till den textfärg du vill ha på din sida.
- Ändra #BDB1C3 till färgen på din bakgrund. På så sätt syns texten på din sida medan sidan laddas.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<meta name="Author" content="Katarina Wästlund">
<!-- This code is written by Katarina Wästlund, http://kattisdesign.wastlund.se, and can be used for pages for personal use as long as this comment stays intact. If you use this code for making linkware you must link to my page: http://kattisdesign.wastlund.se -->
<title>Nio-delad rambakgrund/ Framed background in nine pieces</title>
<style type="text/css">
<!--
html, body{
height: 100%;
width: 100%;
margin: 0;
padding: 0;
color:#675670;
background-color:#BDB1C3;
}
.bgtable {
margin: 0;
padding: 0;
height: 100%;
width: 100%;
}
-->
</style>
</head>
<body>
<table border="0" cellpadding="0" cellspacing="0" class="bgtable">
<tr>
<td width="100" height="100">
<img src="top_left.gif" width="100" height="100" border="0" alt="top_left"></td>
<td style="background: url('top_middle.gif');"> </td>
<td width="100" height="100">
<img src="top_right.gif" width="100" height="100" border="0" alt="top_right"></td>
</tr>
<tr>
<td style="background: url('middle_left.gif');"> </td>
<td style="background:url('middle_middle.gif');" valign="top">
<p>Lägg in din text här...<br>
Add your test here...</p>
</td>
<td style="background:url('middle_right.gif');"> </td>
</tr>
<tr>
<td width="100" height="100">
<img src="bot_left.gif" width="100" height="100" border="0" alt="bot_left"></td>
<td style="background:url('bot_middle.gif');"> </td>
<td width="100" height="100">
<img src="bot_right.gif" width="100" height="100" border="0" alt="bot_right"></td>
</tr>
</table>
</body>
</html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<meta name="Author" content="Katarina Wästlund">
<!-- This code is written by Katarina Wästlund, http://kattisdesign.wastlund.se, and can be used for pages for personal use as long as this comment stays intact. If you use this code for making linkware you must link to my page: http://kattisdesign.wastlund.se -->
<title>Nio-delad rambakgrund/ Framed background in nine pieces</title>
<style type="text/css">
<!--
html, body{
height: 100%;
width: 100%;
margin: 0;
padding: 0;
color:#675670;
background-color:#BDB1C3;
}
.bgtable {
margin: 0;
padding: 0;
height: 100%;
width: 100%;
}
-->
</style>
</head>
<body>
<table border="0" cellpadding="0" cellspacing="0" class="bgtable">
<tr>
<td width="100" height="100">
<img src="top_left.gif" width="100" height="100" border="0" alt="top_left"></td>
<td style="background: url('top_middle.gif');"> </td>
<td width="100" height="100">
<img src="top_right.gif" width="100" height="100" border="0" alt="top_right"></td>
</tr>
<tr>
<td style="background: url('middle_left.gif');"> </td>
<td style="background:url('middle_middle.gif');" valign="top">
<p>Lägg in din text här...<br>
Add your test here...</p>
</td>
<td style="background:url('middle_right.gif');"> </td>
</tr>
<tr>
<td width="100" height="100">
<img src="bot_left.gif" width="100" height="100" border="0" alt="bot_left"></td>
<td style="background:url('bot_middle.gif');"> </td>
<td width="100" height="100">
<img src="bot_right.gif" width="100" height="100" border="0" alt="bot_right"></td>
</tr>
</table>
</body>
</html>
© Kattis 2004