What started out as a tutorial on non-mirrored background designs has turned into a community exercise in code improvement, and illustrates the value of a group approach to problem solving, and the benefits of sharing ideas on Webmaster message boards. Confused? Read on:
Today's article was going to be the new tutorial I had heard about on the XBiz Cosmic Village 'Design Station' message board. While a valuable idea, these tutorials would receive a wider audience if run as a featured article rather than as a message board thread, and so to try and benefit the largest number of XBiz readers possible, I began my usual copy, paste, spell check, and edit process, starting with "saint's" original post, which appears below:
Here's a tutorial on how to do the background on sites such as girlswet.net or on allpetite.com, which use a layout that extends to both sides of the screen. There are a lot of ways to do this, but my way is ideal because you can use both a left background image and a right background image, which lets you do nearly anything you want. You are not restricted to having both sides at the same level, which makes it look like a straight line (just like on allpetite.com). The design of www.girlswet.net is a little bit more customizable because it does not require 'mirrored' images — notice how it dips down on the right side. Also with this code your site design will be in the dead middle of the screen, centered from top to bottom as well as from left to right.
The steps involved in doing this are very simple:
1) Make your background files. They need to be as tall as the site design is, and however many pixels wide. These files are just going to repeat themselves, so if you have a plain bar-type of design, your image will be fine at only 1pixel wide. If you choose a more intricate bar or gradient, then you might need it to be a bit wider. Just remember to make a design that will work when being repeated.
2) Now edit your source code; directly after the body tag, paste the following HTML:
table width=100% height=100% border=0 cellpadding="0" cellspacing="0">
td align=center>
table width="100%" height="480" border="0" cellpadding="0" cellspacing="0">
td align=center table width="100%" height="480" border="0" cellpadding="0" cellspacing="0">
td width="50%" background="leftbackground.gif" /td td>
3) Directly before the /body tag, paste this HTML:
/td td width="50%"
background="rightbackground.gif" /td /table>
/td /table /td /table>
4) After this is done you should be all set. Just make sure that you change the '480' value so that it's the same as your design's height, and make sure that the 'leftbackground.gif' and 'rightbackground.gif' both match your two background file's names. This is one of my primary goals here at XBiz — to continually improve and strengthen the Webmaster community that has developed here.
Note: sometimes (I think it is because I use imageready to cut up my designs) my background files seem to be 1 pixel off. All you need to do to fix this is take the .gif files into Photoshop. Make sure your background color is the same as the site's on your color tablet.
Choose Select > All. Select your move tool, then hit your down arrow once — presto! You're set. If you need to see a working example of this coding, then go to http://www.girlswet.net/tour1/ and view the source. If anyone has any improvements on the code or know why I might be coming 1pxl short sometimes please let me know.
Hmmmm:
While I do not claim to be a designer or HTML guru, at this point I had an uneasy feeling that while this design approach would (and does) work in MSIE, that this wouldn't work with 'Netsuck' or any other less-forgiving browser, and a quick check with NS6 proved my suspicions correct. What I noticed was that without the cross-browser margin codes in the body tag, the vertical alignment was not possible (a point that Zayne E. also made). Furthermore, the lack of TR and [code]/TR tags within the table code will cause problems with some browsers, and in my experience, NS and certain other browsers do not render background images within 'empty' table cells — something that the addition of a simple ' ' and 1x1 transparent .gif can often fix, since there only needs to be 'some' content within the cell for it to render properly.
This exercise illustrates the importance of cross-browser testing, but for me also showed the value of trying to do things within an open community atmosphere where we all benefit from new ideas and approaches to common problems. And this is one of my primary goals here at XBiz — to continually improve and strengthen the Webmaster community that has developed here, so that we may all be better at what we do. While I could try to post the correct code to do what was originally intended, I would rather see the right answer come from within the Design Station community itself - after all, there's a lot more design talent there than I have:
Think you can solve our cross-browser problems? Click the link below, and share your secrets!
