Tips and Tricks

Creative use of background images

Earlier in the week I received an e-mail asking me if it would be possible to have horizontal lines extending right across a page in iWeb. Obviously you can use the shapes menu to draw a line (or lines) within the permitted area in iWeb, but if you want to extend the line right across the page outside of the set page area how do you do it? The answer is clever use of the background settings within iWeb’s Inspector.

Take a look at the image below to see what we are trying to achive. In the first image you can see the web-site as it stands now with the horizontal lines which make up the top and bottom of the box stopping at 800px width. What we want is those 2 horizontal lines extending to the edge of the screen.

To begin with you need to have your page designed in iWeb. That’s the easy part. Next you need to know the height of the box (ie the distance between the two horizontal lines). In addition, you need to know how far from the top of your page the top of your box is.

The best way to get these measurements is insert a rectangle shape from the Shapes menu, drag it to the correct height and then check in Inspector, using the Metrics tab; make a note of its properties.

Next thing to do is open your favorite image editor (Photoshop, Pixelmator, Gimp etc) and create a new image that is very tall (2000px at least) and narrow (100px is good, 50px is better).

Set the background to the same color that you want for your site and then draw the 2 horizontal lines, making sure to set them at the correct height on the image. Finally save the image with a suitable name.

Going back to iWeb, open Inspector and select the ‘Page’ tab.

In the section for the Browser Background choose image from the drop down menu and find your image within the Finder window.

Next choose ‘Tile’ from the other drop down and your lined image will spread across the page, lines and all!!

How easy was that? As an aside, I was also asked in another e-mail how to get a gradient fill on the background to an iWeb site. Within the drop down menu for ‘Page Background’ it is easy but not with the ‘Browser Background’. Using the method explained above (just leaving out the horizontal lines) you can create a long thin image that has a gradient from top to bottom and apply that as a background to the Browser.

Have you got a tiled image on your iWeb site? Why not leave a link and let us take a look.

You may also like

8 Comments

  1. Hi,

    How do I get to have a comment box just like yours on my iWeb blog?

  2. Thanks Tim. This worked perfect. I would have never been able to figure this out without your help.

  3. TIM,
    Is it possible to make a full (scaling) video-background in an iWebpage? See example: http://s3.envato.com/files/39047/index.html

  4. Thank you!!! I’ve been looking and looking how to do this.

  5. Hi Tim

    We want to use a photo as our website background – we want it to be a perfect full page background. We found exactly what we wanted to achieve on http://css-tricks.com/perfect-full-page-background-image/

    First, is this possible to do on iweb without using other code and if so how? And if we can use this code – where do we insert it and how do we reference the url (do we use quotes, = sign, etc.)
    Thanks so much. Marcia

  6. Hi – great site! I’ve learned some fantastic tips from you so thanks for making all your knowledge available for noobs like me! I was wondering if you could help me with a problem please: I am designing my site using the Leaf Print theme in iWeb 08. When I add text etc the background is white – and I would like it to be the same as the browser background’s ‘image fill”.

    The problem is that I can’t seem to find that particular file on my iMac and was wondering if you could direct me to the folder that would contain it please?

    Many thanks

    Mark

  7. Hi – please ignore my last post about the image fill issue – I just realised that by setting page background to “none” – it resolves the problem – thanks though :0)

  8. Can I have non-moving links on the side of a scrolling page?

Leave a Reply to Jack Cancel reply

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