topp

Framed background in three pieces

To do this kind of background you first have to do a frame that you divide in three pieces: one top piece, one middle piece and one bottom piece. Be aware that the middle piece will repeat itself and must be able to do so seamlessly. You also need a background tile to fill the page outside of the frame. I have used the following pictures: (Right-click and save if you would like to use them.)

topp.jpg

mitt.jpg

bott.jpg

pinkbg1.jpg

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 #F6D4B8 to the color of your background. By doing this the text on your page will be visible when the page is loading.
  • If you want the margin between the frame to be wider or narrower change 50 to a larger or smaler value. Note that you have to change in to places, on for the left margin and one for the right margin.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<!-- 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>Tredelad rambakgrund, Framed background in three pieces</title>
</head>

<body bgcolor="#F6D4B8" background="pinkbg1.jpg">

<div align="center">

<table border="0" cellpadding="0" cellspacing="0" width="730">

<tr>
<td><img src="topp.jpg" width="730" height="150" border="0" alt="topp"></td>
</tr>
<tr>
<td style="background: url('mitt.jpg'); padding: 0 50px 0 50px;" width="730" height="100">
<p>Lägg till din text här...<br>
Add your text here...</p>
</td>
</tr>
<tr>
<td><img src="bott.jpg" width="730" height="80" border="0" alt="botten"></td>
</tr>
</table>
</div>

</body>
</html>
Tube from Lindas Galery
© Kattis 2004
botten