TUTORIAL: Using seamless tiles with CSS: Part Two
Again, if you aren’t familiar with using CSS for layout, you may want to reference GLISH or W3SCHOOLS for further explanation. I will also be using raw code, as I always do.
We don’t need no stinking Dreamweaver… 
To keep this tutorial simple, I am just going to use the basic tags in the html file, and use inline styles. Clearly, for a live web page, you will want your Doctype, meta tags and other info in the header, and use an external CSS file, but it’s not necessary to make this example work. So, that being said, create a new .html file in notepad or your favorite text editor, saving it as index.html in your folder from part one of this tutorial. Here’s the base code for it, which I will explain:
<html>
<head>
<title>My first pure CSS/seamless tile page</title>
<style type=”text/css” media=”screen”>
body {
/* We are using a dark colored background,
so I want the text white */
color:#FFF;
margin:0;
padding:0;
background:url(‘images/seamlessTile.jpg’) top center;
}#leftside {
width:760px !important;
margin-left:auto;
margin-right:auto;
background:url(‘images/leftside.jpg’) top left repeat-y;
}#rightside {
width:760px !important;
margin:0;
padding:0;
background:url(‘images/rightside.jpg’) top right repeat-y;
}#content {
width:710px !important; /* 760px – 20px left – 20px right – 10px padding */
height:500px; /* Demonstration only. Remove with real content */
margin-left:auto;
margin-right:auto;
padding:10px;
background:url(‘images/seamlessTile.jpg’) bottom right;
}</style>
</head>
<body><div id=”leftside”>
<div id=”rightside”>
<div id=”content”>
This is where your content will go. The seamless tiles around this will expand vertically to match whatever you place in here.<br /><br />
Be sure to include the break tag below to ensure the left and right containers expand to fit the content.
<br clear=”all” />
</div>
</div>
</div></body>
</html>
Ok… as Wordpress didn’t keep my tabbing/staircasing, this looks a bit messy. Its much easier to identify stuff when you have the nested items tabbed out in a staircase. But what I did with the styles in the HEAD content of the page is this:
- Defined the basics for the body of the page, including margins, padding and of course, our background tile. I could go as far as to define the base font, style, decoration and characters, but I am keeping this simple for the purpose of this tutorial. I also wanted to be sure and specify top center alignment to begin the seamless tile, so that it matches up with our tile centered from Photoshop. It’s much easier to know exactly where a tile will fall when you center it in the window, thus allowing for much more advanced effects, etc.
- In the next 3 blocks, I defined the #leftside, #rightside and #content containers. When using CSS, you want to use a # sign to define IDs, and . to define classes. (e.g. #idName or .className) Classes get used over and over throughout a page. IDs are for defining the basic blocks of the site. Each of our DIVs are nested inside of each other, in order, so that as the materials inside #content grows or fills up, the leftside and rightside containers do the same respectively.
- The #leftside and #rightside containers have their background image attributes set to only tile vertically: repeat-y, and the start point either top left or top right, respectively. This basically “trims out” our center area, and is far better than having a huge tile 760px wide to achieve the same effect.
- The #content is filled with the same background image tile that we used for the body, only oriented to the bottom right. This helps to eliminate the pattern in the tile matching up along the shadowed edges, and is more of an aesthetic, anal-retentive tweak of mine.
Now, I did assign a height to the #content, but thats just to show you how the page would look with content to fill it. Remove the height attribute once you have true content inside the DIV. But basically what we have here is a page made up of 4 files, with the look of one large file. Granted, I am using a rather large file for the background tile, but it is still only 56 kilobytes of graphics. Using a smaller, less complex tile to start will result in a smaller file overall, but the seams between the tiles will typically be more noticeable.
Hopefully, if everything went right, you have an .html file that looks like this in a web browser when you are done:
This CSS is also highly cross-browser friendly, including IE5, IE6, IE7, Firefox and mozilla. I have not checked it in Nutscr@pe, as I refuse to install such a horrid piece of software. IE for Mac is also another worthless browser that has long been removed from my hard drive.
Now, there are TONS of possibilities here, including adding rivets to the metal, bent /shadowed edges instead of straight, or adding a different seamless tile effects for the content. I for one, dislike the ‘boxed’ look that straight edges give. I prefer a more ‘organic’ or natural/loose feel, as demonstrated by the skin of this blog, which is just a very elaborate example of this tutorial with some added DIV containers and tiles. You can also check out my other posting of “Yet another Wordpress theme”, which has some pretty elaborate uses of custom seamless tiles I created from textures, and the use of repeat-y and repeat-x to achieve a seamless overall look and feel with less bandwidth.
I hope you enjoyed this, and if you found this set of tutorials even remotely entertaining or useful, or something confused you, drop me a comment below. Getting feedback only gives me fuel to do more tutorials.
Thanks for visiting and reading through my blog… 