Skip to main content

Use an image as the site background

Set a full-page image background for your site. Covers positioning, repeat behavior, and interaction with section backgrounds.

Written by Troy Villasanta

[Required Permissions: Account Administrator, Content Administrator, Editor, Author ]

The custom CSS below allows you to use an image as a background for your site, which will be applied to subpages in the site, and all the sections in each subpage, if those subpages and sections have a transparent background.

The image must be hosted online, and may have to be publicly accessible. Different content delivery services can accomplish this for you, and you may also use Zoomforth's utility to host your image. You can refer to this article about our native hosting utility. The user of our native hosting utility requires the role administrator access.

Custom CSS to use an image as the site background

body {
   background: #fff url(https://res.cloudinary.com/dincfrj36/image/upload/v1574988338/Random%20stuff/sitebackground_snbln1.png);
   background-repeat: no-repeat;
   background-position: center;
   background-size: cover;
}


The second line is where the URL of the hosted image is to be pasted. Replace everything in the parentheses with your content URL.

Below are the ways you can add custom CSS for your site:

1. Via the site editor

This isolates the custom CSS to be applied only to the individual site and doesn't require administrator access to accomplish. You can refer to this article for more details.

2. Via theme editor

Custom CSS applied through the theme editor affects all sites using the theme. Administrator access is also required to pull up the theme editor and apply the changes. You can refer to this article for more details.


For more on how sections and backgrounds work together, see the guide to adding sections and content to your Zoomforth site.

Did this answer your question?