Introduction
The default background for every page is defined in the fhstyle.css file as plain white, but can be defined in the Wizard Step 7 – Presentation and Behaviour via its Colours button Background setting.
Also the colour can be changed, or an image substituted, in the few simple steps outlined below. This technique is also used by Family Tree Tips ~ Alter CSS Default Style for text fonts, etc.
Insert HTML Head Code
In the Wizard Family Tree Wizard ~ Step 8 – Final Details click the Advanced button and insert the following HTML code at the end of the <head> section:
<link rel="stylesheet" type="text/css" href="_custom/mystyle.css"
where mystyle.css is your CSS file created in the next step. Subsequently, by changing this one CSS file, the style of all the web pages can be altered without rebuilding any of them.
If the website is to be viewed on mobile phones or tablets then also insert the following HTML code:
<meta name="viewport" content="width=device-width, initial-scale=1">
Add CSS Script
Something similar to the following CSS statement must be placed in a plain text file named mystyle.css which must be included in a \_custom\ subfolder of the \data\ or \data files\ subfolder holding the ƒhsaved files. Your background image file myimage.jpg (or .png or .gif file) must be included in the same \_custom\ subfolder. It will be rendered on the the web page by tiling it repeatedly to fill the background.
body { background: #C0D0F0 url("myimage.jpg") }
where the code #C0D0F0 (which represents pale blue) is a background colour to use if the image file is missing.
Either the colour code #C0D0F0 or the image file url("myimage.jpg") may be omitted.
These background properties are explained at w3schools CSS Background.
Colour codes have several formats explained at w3schools HTML Colors and shown in an example below:
NAME: green
HEX: #008000
RGB: rgb(0,128,0)
RGB%: rgb(0%,50%,0%)
Placing your files in the \_custom\ subfolder prevents them from being deleted when the wizard rebuilds the package.