top_left   top_right
 

Framed background in nine pieces

To do this kind of background you first have to make a frame and divide it in nine pieces. The pictures I have used in this page are shown below: (Right-click and save if you want to use them.)

topp vänster   topp mitten   topp höger

mitten vänster   mitten mitten   mitten höger

botten vänster   botten mitten   botten höger

In the box below you can see the code for this page. You can download a file with the code here.
You have to change the text marked with red to the name, width and height of your background pictures.
You can also change the text marked with blue.

  • Change #675670 to the text color you would like on your page.
  • Change #BDB1C3 to the color of your background. By doing this the text on your page will be visible when the page is loading.
<!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>
© Kattis 2004
  
bot_left   bot_right