A background can help build a wiki's visual identity and make it stand out. This page explains the various customization options available to your community.
A wiki's background is set through the Theme Designer. There are two components to the background: an image and a color, both of which can be different for the wiki's light or dark theme.
The background image can be uploaded in PNG or JPG formats, as long as the file isn't larger than 1 MB. If it's larger, you can try reducing its size by increasing the compression, reducing the quality, or lowering the dimensions. If the image is a PNG file, you can convert it to a JPG file to lower the file size.
There are two ways to display the background image:
- Header will display the image in the wiki's header area at the top. This is best for banners and other horizontal images. The recommended dimensions for header images are 2880x656 pixels.
- Full-screen will display the image through the entire background area. This is best for larger designs. The recommended dimensions for full-screen images are 2880x2880 pixels.
Both display types can further be customized by a background image style:
- Cover will stretch the image to fill as much of the browser height as possible. This is best for very large images.
- Tile will repeat the image either vertically, horizontally, or both. This is best for smaller images designed to be repeated.
- Fit will confine the image to the width of the browser. With the header display type, the fit style also positions the image in the top-left corner, the top-right corner, or the middle.
Regardless of the display and style, the background image will stay in a fixed position and remain visible while scrolling up or down on the page.
The opacity of the image can also be changed by moving the slider below the style selection. 100% is fully opaque and 0% is fully transparent.
The community background color option in the Theme Designer allows you to change the color of the background area. By default, when no background image is uploaded, the color is the only thing that appears. If an image is uploaded, depending on the display and style selected, some sides of the image will fade into the color. Lowering the image's opacity will also display the color through the entire image.
The community header color option allows you to change the color of the text and icons in the header area. This should be changed if the default option does not appear readable against the background image and/or color.
- When making a skin, always consider the wide range of possible screen resolutions. The better your image is adapted to fit various screen resolutions, the happier your community will be.
- Wallpapers, key art, and image searches based on your community's topic can be a good idea to find some creative inspiration for your background.
- Consider the whole of the site when making the background. A busy, vibrant wallpaper may draw readers' attention away from your wiki's content. Conversely, a muted, subtle background can be the finishing touch your wiki needs.
- In general, Theme Designer is recommended for uploading background images and designing your wiki. Backgrounds added through custom CSS can cause adverse effects after platform updates or changes.
- Learn more about using Theme Designer
- Learn more about gradients
- Learn more about using colors in your community's design
- Learn how to edit the wiki navigation