Okay, so perhaps not just iWeb, we’ll have to use Preview too. And Paparazzi but that’s a free download as well. But the main bit of the work is done in iWeb.
As you may well know iWeb can be used to set an image as a background for your iWeb site. The only problem is, is that when you set it to tile it tiles on both the horizontal and vertical axis. To get round this we will have to use very long tiles, but it is all do-able in iWeb.
If you follow this iWeb tutorial you should be able to end up with something that looks a bit like the image below; with regards the repeatable background image anyway. Of course, your imagination is the only limit to what your iWeb site will look like and you can use all manner of things in your repeatable background, but I have stuck with the shapes menu and used 3 rectangles and a few circles.
It’s just a case of getting the settings right using Inspector.
So let’s start by opening up iWeb and adding a ‘New Site’; you don’t have to strictly speaking but you don’t want to muck up your current site do you?
Select the ‘White’ theme and a blank page from that theme. Using Inspector, get rid of the nav-bar and delete the horizontal line across the top as well as the text-box. You want to end up with a completely empty page.
It is at this point that I like to switch on the guide-lines (Cmd-Shift+L) just to mark out the page.
Start by adding a rectangle to the top of the page, 700px wide x 50px high. This is filled with a gradient going from dark gray to black. This will eventually be where the navigation will go.
Below the black rectangle we draw another one, 700px x 250px, filled with 2 shades of blue. Make sure that your gradients are perfectly horizontal other wise your (eventual) tiles will look wrong.
Now the last rectangle. I have gone for 700px x 500px with a gradient fill of light gray to white. Obviously you can choose what ever color you want for the this last rectangle however, the final color MUST be white.
The reason being iWeb tiles horizontally and vertically. As I mentioned above, to get round this we will make very long tiles thereby looking as if we are only tiling horizontally.
To add a bit of decoration and to break up the straight lines I added a few circles, 10px wide and filled with the color that is used at one end of each gradient (to help them blend in); in this instance black at the top and light-gray for the lower ones. There is no need to go all the way along the page with the decoration (it is to make a repeatable tile after all) so just a few will do.
Finally, in Inspector we need to change the height of the page content to ensure that the tile will be long enough. I set this one to 4000px which is the maximum. In all honesty, your page really should never get this long, users will get fed up scrolling unless it is really worth it.
Now publish your site to a local folder and, when given the opportunity view the site in your browser. When it pops up select and copy the URL and then close the browser. Next download (if you haven’t already) and open Paprazzi and paste the URL of your page into it; press the capture button.
A screen shot of your iWeb age will now appear all long and thin. Save this screen shot as a high quality JPEG (to your Desktop for ease). Now you can close Paparazzi.
Now open that JPEG you just saved, in Preview. Using the Select tool you have to draw a rectangle that is 50px wide (because you have drawn 5 circles 10pixels wide) and 4000px high; once this is done press Cmd+K to crop the image.
You should now be left with an even thinner and longer image with you can now save as your background image.
Back into iWeb and create a new page. Open Inspector and within the Page tab press the Layout button. Select ‘Image Fill’ as the ‘Browser Background’ and find where you saved your background image.
And that is it. You now have a tiled image that will stretch across the page no matter how wide a visitor to your iWeb site has their browser.
Do you use tileable images in your iWeb site? Leave a comment and let us take a look.