How to Tile an Image to Create a Seamless Web Page Background|
This tutorial outlines methods you can use to tile an image on a web page, thereby create a seamless background design. We'll also explain how you can prevent an image from tiling when you don't want it to and how to transform any image into one that will look decent when tiled.
Tutorial Subjects Index
• How to transform an image into picture that looks good when tiled
• Using the Body tag to tile an image
• Tiling images with the table data (TD) tag
• Using Cascading Style Sheets (CSS) to control image tiling
How to Transform Any Image Into One That Looks Good When Tiled
Not all images look good when tiled as a background. Pictures such as those in our Web Page Backgrounds That Can Be Tiled section (above) are already set up for tiling purposes, and so are perfect for the job. If you want to use an image that is not specifically designed to be used as a tiled background, then there is a trick you can do to make it look better when tiled.
Perhaps we should first explain what makes an image good for tiled backgrounds. In a nutshell, the image should match up on all four sides to itself. That may sound a little strange, so let's take a look at an image to help explain.
If you look closely at this picture you will see that the pattern on the left side of the image matches up with the pattern on the right side, and the same with the top and bottom. Therefore, when this image is tiled the pattern will join, so to speak, and create a seamless design.
Here's what the above image looks like when tiled. You can see that an even pattern is created because of the image design:
Now we'll look at the same image again, only this time it has been edited (cropped smaller) so that the sides, top and bottom no longer match up. This is the image that was used:
And here is the image tiled:
Obviously the design that was created by tiling the second image is not one most people would want on their website. The point is, not all images look good tiled, but there is a method for fixing that problem.
How To Make Any Image Look Good When Tiled
Okay, so you have a picture that you really want to use as a web page background, but when you tile it, it looks horrible. Here's the solution:
With this method we're going to use our example image that looked horrible when tiled and turn it into one that looks decent. It's not hard to do but requires some editing with image editing software. We'll have to assume you have some basic skills with image editing software to accomplish this. Follow these steps to proceed:
- Open the picture in your favorite image editing software.
- Copy the picture to the clipboard. This will normall be Edit > Copy in most programs.
- The next step is to enlarge the canvas (not the picture, the canvas) so that the new dimensions equal twice the width and twice the height of the picture's original size. For example, if the image you are working with is 50x50, enlarge the canvas to 100x100. When enlarging the canvas, make sure the original picture is in the top-left corner. Your image editing software should allow you to choose where the original image is placed on the new canvas size. Again, it should be in the top-left corner. Your picture should now look like something this:
- Select Edit > Paste in your graphics software to paste the original image that you copied to the clipboard into the new canvas. Flip the pasted portion horizontally then move it into the upper-right corner. Your picture will now look something like this:
We now repeat the same process for the bottom-left corner and the bottom-right corner, but with some differences. For the bottom-left corner, the pasted portion is to be flipped vertically instead of horizontally. For the bottom-right corner, the pasted portion must be lipped both horizontally and vertically. These steps will give you images that looks something like these do, respectively:
You're done! The finished image will now match up on all sides to itself and can be tiled as a web page background.
Now, when tiled, the new image produces a pattern like below. The background is now seamless with each picture matching up to the next, which is at least better than the unsightly mess we saw earlier.
To help you remember how to do this, here is a picture that you can download; it is marked with the proper 'flips' to create an image that can be tiled. Just remember to copy the original image before you start working with it, then resize the canvas so that it is twice the width and height of the original. Here's the picture:
It's time to outline some popular methods used to create seamless, tile web page backgrounds.
Popular Code Used To Tile a Web Page Background Image
There are three common methods used to tile images on web pages: code applied to the Body tag, code applied to the table data (TD) tag and with the use of style sheets (CSS). We'll look at all three here and outline the advantages and disadvantages of each.
Using the Body Tag to Tile an Image
This is a very simple method that is easy to implement. A 'normal' body tag used in simplified HTML documents will usually make reference to the background of the web page. For example, the following body tag displays a web page with a white background. We've included the text and link properties so that the tag appears more complete.)
<body bgcolor="#FFFFFF" text="#000000" link="#0000FF">
To change the background property to reference a picture, the tag would be written like this:
<body background="ImageName.jpg" text="#000000" link="#0000FF">
When an image is referenced in the body tag as above, the picture will be tiled over the entire background of the web page.
It's a simple way for those not familiar with CSS (Cascading Style Sheets) to create a tiled web page background. Different foreground colors and/or tiled patterns can still be used in table cells to add a more pleasing look to the website. Bottom line, it can be useful in certain situations.
You have no control over the display. The entire page will be covered with the tiled image excepting those areas where table cells over-ride it. This also means that you are forced to over-ride the design if you don't want it shown on some areas of the web page which can turn into quite a hassle. Also, the image will be tiled both horizontally and vertically and you cannot change that fact.
Tiling Images With the Table Data Tag
The most basic table data tag looks like this:
The most basic table data tag that specifies a color for the background looks like this:
To create a tiled background with an image in a specific table cell we use the same code as we would in the body tag:
This will cause 'ImageName.jpg' to be tiled horizontally and vertically in the specific table cell the 'background=' code was added to. It should be noted here that if you do not specify any background for a table data (td) cell, the main background of the web page will be shown.
Again, it's easy to do, plus, using table cells (tables) allows you more control over the look of your web page. You could, for example, tile one image pattern in the body tag for a main background, then use tables to display overtop the main background with other colors and/or tiled designs. This needs to be done carefully, however, or you may end up with a web page that appears 'unruly' and cluttered. Tiled backgrounds in general need to be chosen carefully as your visitors may not appreciate having some glaring, wild design obscuring the text of your web pages.
As with the body tag, the image will be tiled both horizontally and vertically whether you like it or not.
Using Cascading Style Sheets (CSS) to Control Image Tiling
The use of Style Sheets will give you full control over any image tiling you wish to do on your web pages. Pictures can be tiled horizontally only, vertically only, both directions, or an image can be displayed with no tiling at all.
If you are unfamiliar with CSS you can find a good Style Sheets Tutorial here. For this article, we'll show you the code used to tile images any way you would like.
This is an example of a style sheet class that could be used to set properties for a web page:
We've included the 'font' and other properties just to make it look more complete. In the above example, any part of a web page (or the whole thing) that specifies 'MyCss' will be displayed with the properties shown in the example. The background color would be white (#FFFFFF), the text black (#000000 - specified by 'color' in the element) and so on.
To add a background image that is tiled, we add the 'background-image' element like so:
As shown above, the background image would be tiled horizontally and vertically because no other instructions have been included in 'MyCss.' (Tiling horizontally and vertically is the default.) We can control how the image is tiled, however, by adding more instructions. To have the image tile horizontally only we insert the 'repeat-x' property like this:
To have the image tile vertically only, we use the 'repeat-y' property instead:
You can also cause the image to be displayed statically, without repeating by changing the code to this:
There are many; if you're not using Style Sheets with your website you are missing out on a lot. CSS is much easier to learn than you might imagine, so if you're only slightly familiar with it, or not familiar at all, take the time to read a good Style Sheets Tutorial. The use of Style Sheets gives you full control over how your image is tiled, and you can't beat that. With full control, there is little else to say. CSS is the way to go.
We just want to add that in the examples above, the image to be tiled was always referenced directly, for example, background="ImageName.jpg" That works fine if your images are in the same folder as your web pages, but most websites are not set up like that. To reference an image from the folder it resides in, you simply add the path to the image starting from the location the web page is in. For example, if the image is in a folder called 'images' it would be referenced like this: background="images/ImageName.jpg"