Having a large image or photograph as background is very ‘in’ at the moment when it comes to modern web design. A problem arises however, when you try to achieve this style in iWeb. Inspector only allows you to set a tile or centered image that will move when a user scrolls the page. This obviously isn’t what you want when you have your most beautiful image as a backdrop for your home page.
To get round the problem all you have to do is a tiny little bit of code editing (and I do mean tiny) before you publish your site and you will be able to keep the background of your iWeb page static whilst scrolling the content.
One of the more painful decisions you will have to make is which image to use and how big to make it. Obviously different people have different monitors – yes the world would be a better place if everyone owned a new 27″ iMac!
Using an image that is too small will result in white lines to the bottom and right of the background image depending on what size resolution your site visitor has. If the image is too big then obviously it wont all be seen. I personally would use an image that is roughly 2000px wide by 1200px high but you don’t have to stick to those measurements; testing is the key!
You will now have to select an iWeb theme that is ‘empty’ such as White. The reason for this is that some themes have a separate image for the footer section of a page and so setting the page background to ‘none’ as you will see, will still leave an image in the footer (try it on Darkroom and you will see what I mean).
So, as I mentioned above, choose the White theme and open ‘Inspector’. Set the page background to ‘None’ and the browser background to ‘Image’. Browse to where you have saved your image and select it. If you have used a suitably large image you don’t have to bother about setting the tile option, but if you have any doubts go on the side of caution and select ‘Tile’.
Once you have completed adding all of the iWeb page’s content you now have the option to either publish to a folder (or MobileMe) as it is or to make the content stand out a bit more, add a shape from the shape menu behind all of the content and make it transparent in Inspector. I recommend using a setting of less than 50% . It is not necessary to add the shape and in reality will only serve to slow down the loading time of your iWeb site, the choice is yours and depends entirely on what image you have set as your browser background and how legible your content is.
By now you will have (either with or without a transparent shape) an iWeb site published to a folder, be it on your hard drive or on your iDisk.
It’s now time to start editing the HTML code so navigate to the folder on your hard drive (or iDisk) where you published your iWeb site. Find the first page you created in your site and right-click (Ctrl-click) on it and select ‘Open with’. Then when the drop down list of applications appear choose your HTML editor of choice.
Once again I recommend the free application TextWrangler from bare Bones Software.
Select Cmd+F on your keyboard and enter ‘no-repeat scroll’ into the ‘Find’ window that pops up.
Hit return and the phrase ‘no-repeat scroll’ will appear. Now all you have to do is replace the word ‘scroll’ with ‘fixed’. That’s it.
Do that for every page on your site and then save everything. You can now publish your site to your web host via FTP, or if you are a MobileMe user you have already finished.
Visit your web-site to check out the new non-scrolling background. I personally think this is a fantastic technique for photographers or artists who wish to display their work, a different image or photograph on each page would look stunning.
Have you used this effect on your iWeb site? Leave a comment and let us take a look.
[...] Read this article: How to make your iWeb sites background static | All About iWeb [...]
When you are finished making all the changes to the site and to every page, you mentioned that we could use ftp or mobileme to publish our website.
How? I have mobileme. do i launch iweb again and click publish, or do I click something in idisk??
Jackie,
If you have MobileMe, don’t publish to a folder. Publish as normal then find the folder on your iDisk and make the changes to the pages there. There should be a ‘Sites’ folder on your iDisk that contains your iWeb site.
Tim
Im really new to mac where do i find the “folder on your hard drive (or iDisk) where you published your iWeb site.”
Paul,
It depends where you saved it. By default there is a folder in your home folder that is called sites and it should be within that one. On MobileMe there is one called sites too I believe.
Tim
dah its alway under your nose thank you i will trying to do the above hint.
This is great and simple to do it. Thank you!
Hummmmm, Text wrangler can’t seem to find the text that you say to look for on any of the pages on my site. I am publishing to a folder because that is how I publish it with Dropbox. Is that the problem?
been playing arounfd with Iweb 3 and wanted to figure this out, this was very helpful. Views great on my mac on a couple of browsers Now wondering how to scale this so it displays coorectly on pc’s and other computers whcih is doesn’t quite fit. is there a code so that it “scales” correctly. be great to know this.
When you update the site, do you have to go back and readjust scroll to fixed every time? If so, is there a fast solution for that?
thanks so much.. now the next challenge is to see how to get a transparent iframe
i did it and it worked ! but the problem is that each time when i make some changes in my website i have to do the same thing :S
i have so many pages and i can’t do this for all pages
any solution for this ?
Sadly that’s iWeb for you. You can use CyberDuck FTP which has selective upload so that you only have to upload changed pages to your web-site. That should mean that you won’t have to edit every-page each time.
Great, this is exactly what I was looking to do!
Is there a way to make the page dynamic? I have a discussion board on one page, so the page length obviously increases with every post. Still want the background fixed.
I’ve found a good solution for this problem which is using Mass and Replace it ( Free software )
u have to configure it once and it will do the job for all pages that u select them. The good thing is u can save this configuration so that u can use it later after u republish the site again
Hi. Thanks for the info. Very basic computer user here. Have got as far as changing the html and the html files (where I published to) are working and the image is static. Great. But I can’t figure out how to get these files from the folder on the desktop onto my website. I don’t use mobile me but publish to ftp server – don’t know how to do this without iweb. Thanks for the help so far. Would appreciate any advice (in very basic terms!).
Thanks again. Dan.
This didn’t work for me. I want the homepage to have browser pic so I changed the ‘no-repeat scroll’ to no-repeat fixed’ on the home html file. didn’t change anything else because ‘no repeat scroll’ wasn’t on any of the other pages. Does it not working for me have anything to do with the index html file not changing also? What should I do? Thanks.
the website i was talking about in the above post is http://www.colorsmithdesign.com
i want to extend the color bands across the browser page.
thanks.
is there any way to have those images constantly changing in the background?