How to upload a background image for the entire website

The majority of our themes allow for a background image to be uploaded and displayed across all pages on your website. There is also an option to change the background image for individual web pages. 

NOTE: The Stockholm theme doesn't have the custom background setting in the Website > Theme area, that displays the background throughout your entire website. However on this theme you still have the option to individually add a background image to your web pages and blog posts. 

1. To change the template, navigate to the Website > Theme section of your admin interface. 

FM___Website___Theme.jpg

2. Scroll down and click on the Background Settings section title.

FM___Website___Theme.jpg

3. The items in the Background Settings section title will look slightly different for each individual themes but the principle is still the same.  In some themes you will need to tick the Use a custom background image radio button before the field, where you can upload the background image will appear. 

FM___Website___Theme.jpg

NOTE: The Stockholm theme doesn't have the custom background setting in the Website > Theme area, that displays the background throughout your entire website. However on this theme you still have the option to individually add a background image to your web pages and blog posts. 

4. Click on the Choose File button of the Background image (optional) field. 

FM___Website___Theme.jpg

5. Select the File from your device and click OpenWe only support JPEG, GIF and PNG files for background images.Screenshot_30_03_2020__11_28_AM.jpg

NOTE: There are some general recommendations for each particular theme at the bottom of this tutorial.  

6. Use the green Save button on the bottom of the page to finalise the changes. 

FM___Website___Theme.jpg

 

The general recommendation for background images are:

  • Geneva Theme
    • Choose an image that would work well when it is centre-top aligned to your website. This image will scroll with the page as a user navigates down the page.
    • The default background images provided by this theme range in sizes from 2600x3600, 8x3600, 2600x27 pixels.
  • Phoenix Theme
    • Choose an image that would work well when it is top-left aligned to your website. This image is fixed, so it will not move when the user scrolls down the page. 
    • No default background images are provided with this theme. It is recommended that an image of approximately 2600x2600 pixels is used.
    • NOTE: On mobile and tablet devices the background image is not display for this Theme. As mobile devices do not generally support fixed backgrounds that do not scroll, the background image is omitted for best user experience. It is recommended to ensure that background colour for the website is set to a colour that best matches the dominant colour of the background image.
  • Amsterdam Theme
    • Choose an image that would work well when it is top-left aligned to your website. This image will move when the user scrolls down the page. 
    • No default background images are provided with this theme. It is recommended that an image of approximately 2600x2600 pixels is used.
  • Stockholm Theme
    • A custom background image option is not available for this website theme.
    • The "Hero Image" for a Web Page or Blog Post will be used as a backdrop when one is available.

  • Tokyo Theme
    • Choose an image that would work well when it is centre-middle aligned to your website. This image is fixed, so it will not move when the user scrolls down the page. 
    • No default background images are provided with this theme. It is recommended that an image of approximately 2600x2600 pixels is used.
    • When a Web Page or Blog Post has a "Hero Image" it will be automatically used as the background image for the page.
    • When viewing a Portfolio, Gallery Category, or Gallery the first "Cover Image" available will be used as the background image for this page.
    • When viewing a Blog index page, the "Hero Image" from the first blog post with a hero image will be used as the background image for this page.

 

 

 

 

0 Comments

Article is closed for comments.