Start your favorite editor. Preferably photoshop cs (or 7 will do
) Now click on the k button (the k button is your slice tool) Hide everything in the image that you do not want to be repeated, such as the buttons that you have on the image!
Now you will make 2 slices (1 that will be on the right and one that will be on the left) you will need to judge based on your own ability to see percentage on your own. Make the image around 95% slice for the left side and 5% slice for the right, now press CTRL + ALT + Shift + S (This is save file for web) Choose GIF format, and now choose the images folder,
now note this and be extremely careful, when you save a sliced image it will save a webpage and the images in an images folder so to fix this problem, you need to move one folder back from the images folder, and then choose gif only
ok now that you have the images sliced its time to teach you how to create the repeating background.
I will give this to you step by step as if i was doing this.
Open up your favorite editor (I used dreamweaver mx 2004)
create a new html document. Now create new table
make this table 100% width. Now create a cell in that table (make sure to over size it a little bit, and insert your left side of the image) now create another cell,
these will be side by side note now make that cells width to 100%
(do not make the left sides cell 100% because that will mess up the vibes big time) ok, now that you have done that, lets create the css to repeat the image.
You will need to do css similer to this
<style type="text/css" media="screen">
.repeat {
background-image: url(path/to/right/side/slice.gif);
background-repeat: repeat-x;
}
</style>
ok you see the background-repeat, we put repeat-x so that it doesnt repeat vertically only horizontally this creates a neater effect.
Your end result should be something like this
PHP Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="imagetoolbar" content="no" />
<title>My Document v.1 demo!</title>
<!-- This is the css you want to make this happen -->
<style type="text/css">
<!--
/* CSS GLOBAL */
/* Created By: Jordon Bedwell Of Cybercom Pros */
/* This CSS is Open-Source and falls under GNU / GPL you are NOT required to give me credit though */
/* This is the body tag adjustments, this is the css equivlent to <body> tag attributes */
body {
margin-left: 0px;
margin-top: 0px;
margin-right: 0px;
margin-bottom: 0px;
}
/* Here is where we actually create the repeat remember to change your path */
.repeat {
background-image: url(path/to/right/side/slice.gif);
background-repeat: repeat-x;
}
-->
</style>
<!-- This is just a netscape fix for the resize and what not, you dont need this if you dont want it -->
<script language="JavaScript">
<!--
function MM_reloadPage(init) { //reloads the window if Nav4 resized
if (init==true) with (navigator) {if ((appName=="Netscape")&&(parseInt(appVersion)==4)) {
document.MM_pgW=innerWidth; document.MM_pgH=innerHeight; onresize=MM_reloadPage; }}
else if (innerWidth!=document.MM_pgW || innerHeight!=document.MM_pgH) location.reload();
}
MM_reloadPage(true);
function P7_OpResizeFix(a) { //v1.1 by Project VII
if(!window.opera){return;}if(!document.p7oprX){
document.p7oprY=window.innerWidth;document.p7oprX=window.innerHeight;
document.onmousemove=P7_OpResizeFix;
}else{if(document.p7oprX){
var k=document.p7oprX-window.innerHeight;
var j=document.p7oprY - window.innerWidth;
if(k>1 || j>1 || k<-1 || j<-1){
document.p7oprY=window.innerWidth;document.p7oprX=window.innerHeight;
location.reload();}}}
}
P7_OpResizeFix();
//-->
</script>
</head>
<body>
<!-- Here is what you want right here this is exactly what your coding should look like for the tables -->
<table width="100%" border="0" cellpadding="0" cellspacing="0">
<tr>
<td width="237" height="289" valign="top"><img src="path/to/left/side/image.gif" /></td>
<td width="100%" valign="top"></td>
</tr>
<tr>
<td height="0"></td>
<td></td>
</tr>
<tr>
<td height="1"><img src="path/to/spacer/image/spacer.gif" alt="" width="237" height="1" /></td>
<td></td>
</tr>
</table>
</body>
</html>
You can also move the class to the table which will repeat the background across the table so no matter how many cells you put in, it will still have that repeating background.
Simplified this is all you really need:
PHP Code:
<html>
<title>My Document v.1 demo!</title>
<style type="text/css">
<!--
body {
margin-left: 0px;
margin-top: 0px;
margin-right: 0px;
margin-bottom: 0px;
}
.repeat {
background-image: url(path/to/right/side/slice.gif);
background-repeat: repeat-x;
}
-->
</style>
</head><body>
<table width="100%" border="0" cellpadding="0" cellspacing="0">
<tr>
<td width="237" height="289" valign="top"><img src="path/to/left/side/image.gif" /></td>
<td width="100%" valign="top"></td>
</tr>
<tr>
<td height="0"></td>
<td></td>
</tr>
<tr>
<td height="1"><img src="path/to/spacer/image/spacer.gif" alt="" width="237" height="1" /></td>
<td></td>
</tr>
</table>
</body>
</html>
Dev Shed Forums Sponsor:
August 9th, 2004, 02:20 PM
Del.icio.us
Digg
Google
Spurl
Blink
Furl
Simpy
Y! MyWeb
Linear Mode
