This tutorial will show how to add a full width background image. The image will be fixed on its position and will not scroll with the page. We will use the Template 44 that comes with the software as example. The style "main-bg" and the image used for background can be found in the template. Below shows how "main-bg" is defined.
Select "Tools" > "CSS Style Editor" from the main menu or press this button on the toolbar.
Create a new style by clicking on the "Add" button on the right. Then rename it to "main-bg" by clicking on the "Rename" button or pressing the "F2" key.
Click on the "Background" tab on the right and set the values as shown below. We need to set the background color also. This is necessary because if the image has not been loaded yet, this color will be used by browsers in place of the image. If you have white text over it and the background of the page is white, visitors will not see anything without it.
We select the option "Use responsive images". Smaller size versions of the same image will be generated and they will be loaded by browsers according to the width of the browser window. This is to speed up the loading of the page. If no responsive images are found, you will see the following dialog. Click on the "Yes" button to generate them.
Five more images "office-70-1280.jpg", "office-70-1024.jpg", "office-70-768.jpg", "office-70-768.jpg", "office-70-480.jpg" and "office-70-320.jpg" will be generated. When the width of the browser window is over 1280, the original image of width 1920 is loaded. If the width is above 1024, the image "office-70-1280.jpg" will be loaded, etc.
If you make changes to "office-70.jpg", you will need to generate the responsive images again. Right-click on the file "office-70.jpg" and select "Create Responsive Images" from the context menu. New responsive images will overwrite the existing ones.
We set the "Attachment" to "fixed" so that it will not scroll with the page.
With background size set to "cover", browsers will make sure the image always covers the entire container, even if it has to stretch the image or cut a little bit off one of the edges.
We also center the image as the whole image may not be shown.
Click on the OK button to save this new style.
The new style "main-bg" will now appear on the "Available CSS Styles" panel in the "CSS Styles" tab as shown below.
Open a page and insert a text element on the page by selecting "Insert" > "Text" from the main menu or clicking on this button on the toolbar. Resize the text element to 1024x730.
To apply the style "main-bg" to the text element. Drag the style "main-bg" from the "Available CSS Styles" and drop it to the element on the page. If that element is selected, you can just drag the style "main-bg" and drop it to the "Page / Element CSS Styles" panel above. Both will result in the following:
The width of the element is currently 1024 pixels. To make it expand to the width of the browser window, right-click on the text element and select "Expand to Browser Window Width" from the context menu.
The following dialog will appear. Then select the option "Expand the width of this element to the width of the browser window".
on the toolbar.
on the toolbar. Resize the text element to 1024x730.
