topp

Tredelad rambakgrund

För att göra en tredelad rambakgrund behöver man först göra en ram som man delar i tre delar: en toppbit, en mittenbit och en bottenbit. Tänk på att mittenbiten kommer att upprepa sig längs med höjden på sidan, vilket den måste kunna göra utan synliga skarvar. Man behöver även en bakgrundsbild som kommer att fylla ut runt ramen. De bilder jag har använt på denna sida är följande: (Högerklicka och spara om du vill använda dem.)

topp.jpg

mitt.jpg

bott.jpg

pinkbg1.jpg

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 #F6D4B8 till färgen på din bakgrund. På så sätt syns texten på din sida medan sidan laddas.
  • Om du vill att marginalen mellan ramen och din text ska vara större eller mindre så ändrar du 50 till ett större eller mindre värde. Observera att du måste ändra på två ställen, ett för vänserkanten och ett för högerkanten.
<!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 från Lindas Galery
© Kattis 2004
botten