iWeb FAQ - Background

iWebFAQ.org

 

Where can I change the background? How can I set an image as the background? How can I have the background-image adapting to the screen-size and make it static or fixed?

La stessa pagina in italiano                             Die gleiche Seite auf Deutsch
 

Share/Bookmark

Share/Bookmark



Chapter 1: Setting the background

Chapter 2: Image-background

Chapter 3: Having the background-image adapting to the window-size and making it static

Chapter 4: Background slideshow



Chapter 1: Setting the background


The background is set under Inspector, Page, Layout.


Under Page Background you define the background of the content area. Under Browser Background you define the background of the parts left and right oft the content area. As well as top and bottom if you've set any Top and Bottom Padding at the top of the same Inspector tab.


If you want the same background to be applied to the entire area just select None under Page Background.


There are various possibilities for the background: Color Fill, Gradient Fill, Image Fill and Tinted Image Fill.


When setting colors at the bottom of the window you can reduce the Opacity to make them semi-transparent. So you could set the Browser Background to an image, the Page Background to a color and reduce its Opacity for the Browser Background image to shine through while maintaining good readability.





Chapter 2: Image-background


If you would like to use an image as the background under Browser Background choose Image Fill. I would then recommend you to choose Original Size.


If you want the image-background to be used for the content area as well choose None under Page Background.



Chapter 3: Having the background-image adapting to the window-size and making it static


Whether you use the image. for the entire area or only for the content area your image will probably bigger or smaller than the window. This means that people will only see part of the image when opening your website or that it covers only part of the page. If you want people to see the entire image and want it to cover the entire window you will have to have it adapting to the size of the window.


To do that you will need to edit the HTML code after publishing. Once you published the page open it in TextWrangler and right after </head> you will see a line like this:


<body style="background: rgb(255, 255, 255) url(Pagename_files/Background_image_name.jpg) no-repeat scroll center center; margin: 0pt; " onload="onPageLoad();" onunload="onPageUnload();">


Change it to


<body style="background: rgb(255, 255, 255) url(Pagename_files/Background_image_name.jpg) no-repeat center center; margin: 0pt; background-attachment: fixed; background-size: 100%;" onload="onPageLoad();" onunload="onPageUnload();">


Hence eliminate scroll and add background-attachment: fixed; background-size: 100%; this will also make the background static hence keep the image from scrolling when moving up and down the page.


Since the image has its own name you may also setup an Alternative HTML search & replace to apply the changes and keep you from having to edit the page's code manually. Into the Find box in MassReplaceIt add the normal line of code. In the Replace box add the edited line of code.


This page is a sample of this. You can see that the background sticks in place and doesn't move when scrolling down the page and that it resizes if you resize the window. The Page Background was set to Color Fill with reduced Opacity.



Chapter 4: Background slideshow


If you want to set a slideshow as the background of your page have a look at this page instead.




iWebFAQ.org - Tutorials, Tips & Tricks is made with iWeb and for iWeb.

It’s an EBookStoreToday.com company. It’s presented by Cédric Giger and hosted by HostGator.


Thank you for visiting and supporting my website,

- Cédric -