TutorialsWeb Design

Create tileable backgrounds in iWeb

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.

You may also like

12 Comments

  1. Really love your website and tips. Keep up the good work ! A menu with an overview of sections would be handy though !

    greetings

  2. I´ve want this since ever!!!!!

  3. Sorry, OT but nevertheless: Thank you very much for this interesting website. I was one of those who underestimated iWeb and went immediately to an other website-creation-app – influenced by some negative reviews. However, I found my way back to iWeb, which has just a great (apple-like) interface, and is capable to do so much more than you would expect at first sight. I read so many negative comments on the web about iWeb (“there you can only do sites after templates”), I suspect the writers have only little knowledge about iWeb (they don’t even know that you can remove the nav-bar, etc.). It’s refreshing to find a well-informed site like yours. Thanks.

  4. I have a question about creating textured backgrounds in iWeb, is it possible?

    Also I read your tutorial on creating a search field in iWeb, I like your search field style on this site is it possible to create that style in iWeb?

    On your tutorial for creating a Call out or to button, can the button it self be created with the hover over method and not just the text? Example, your submit button below this “Leave a comment” form.

    Also I have to say this site is AWESOME, every question I have or could think of is on this site, KUDOS.

    Thanks for your response, keep up the awesome work.

  5. Tim, I’m obsessed with your website! If I need any help on iWeb, this is always my first port of call! Just wondered if you would have a quick look at my website and give me some constructive criticism. I uploaded the site the site this afternoon but it still isn’t on listed on Google. Any ideas? Web address is: http://www.ampmgmt.com

    Thanks in advance – and keep up the good work!

    Andy

  6. Mmmm…
    …smart!

  7. @Andy, you need to use the google webmaster tools and setup your site for google to look for it. Also you need to upload a sitemap.xml file to your root directory so that the spider bots know where to go. Also look for RAGE SEO Tools (FREE) to set up SEO and metatags for your web pages, page titles, description and keywords.

  8. This site is great. I have been trying to accomplish this in iWeb for a while. Do you have any idea how to accomplish the same effect with it at the bottom of your page, also?

  9. There is actually a way to do this without creating a 4000 pixel long image. Rather than create a 4000 pixel long image you can create one that stops as soon as it turns white. Set it as the browser background image in iWeb. iWeb will automatically repeat it on the x and y axis. There is no way to change this in iWeb, it will always show up this way, but if you open up the pages html file and type repeat-x after the image url it will only repeat horizontally. Then change the background color to white (255, 255, 255).

    That way you can have a much smaller image and it will load a lot faster.

    1. Jason,

      You are quite right in what you say, however the image doesn’t HAVE to be 4000px if the iWeb designer’s site is only (for example 2000px) high. In addition, by keeping the width to just 2 or 3 px the image size is kept to a minimum. This method would also help you with the e-mail you sent me yesterday, whereas your method only works for people who want white as their final color.

      I hope that helps,

      Tim

  10. Hey Tim. You can change the background color to whatever you like by changing the RGB values, it doesn’t have to be white. The only problem I see with the “long” image solution is that you can’t have a true tiled background. I contacted a friend yesterday and he helped me solve my problem. Now I have my repeating blue and grey bar on the top with a grey square image repeating as the background underneath. I am not very knowledgeable when it comes to web stuff so I apologize if this is confusing. Check my site out to see the result.

    View the source code also.

  11. Hello,
    I am trying to upload a picture to use in iweb as browser background which will be fixed.
    the thing is that when i upload the image it doesn’t appear in full. It zooms in a portion of the image. This is really annoying and have been trying to change it for days.
    Can anyone help please? thank you. A

Leave a Reply to Driezzie Cancel reply

Your email address will not be published. Required fields are marked *

More in Tutorials