How to Change a Block Background in Zibster
Overview
Zibster Website Builder allows you to customize the backgrounds of individual blocks on your website using solid colors, custom images, and predesigned backgrounds. You can upload your own background image or choose from Zibster's Background Library to create a design that complements your website.
You can also adjust how background images appear within a block, including their positioning, size, and whether they repeat. Certain Website Builder blocks also support video backgrounds, which are covered in a separate guide.
This guide explains how to change a block background, customize background image settings, and create a consistent design without changing the backgrounds of other blocks on your website.
STEP ONE
Log in to your Zibster account and click WEBSITE in the left-side menu of your control panel.
STEP TWO
Click the website page containing the block you want to customize.
This opens the page in your Zibster Website Builder.
STEP THREE
Click the block you want to customize to open its editing options.
In the editing menu on the right side of your screen, click BACKGROUND.
Under BACKGROUND IMAGE, select the background option you want to use.
This guide covers three background options:
-
NO BACKGROUND: Use the block's configured background color without an image.
-
CUSTOM BACKGROUND: Upload your own JPG or PNG background image.
-
BACKGROUND LIBRARY: Choose from Zibster's collection of predesigned backgrounds.
Some blocks also support video backgrounds. Those options are covered in the Using Video Backgrounds in Zibster section below.
STEP FOUR
Choose Your Block Background
The available options depend on the background type you select.
Option 1: No Background
Select NO BACKGROUND if you want your block to display a solid background color instead of an image or video.
Your block will use the background color configured under COLORS.
To change this color, click COLORS in the block's editing menu and use the background color picker to choose a color that complements your website.
You can also select NO BACKGROUND to remove an existing background image or video from the block.
Option 2: Custom Background
Select CUSTOM BACKGROUND to upload your own image behind the content of your block.
Under UPLOAD A NEW BACKGROUND, click ADD FILES to choose an image from your device. You can also drag and drop an image into the upload area.
Zibster supports JPG and PNG background images. For best results, we recommend using an image that is 3000 pixels wide by 1730 pixels high.
After uploading your image, you can customize its appearance using the BACKGROUND SETTINGS described in Step Five.
Option 3: Background Library
Select BACKGROUND LIBRARY to browse Zibster's collection of predesigned image backgrounds.
Click the CATEGORY dropdown to choose from the available categories:
-
Geometric: Backgrounds featuring geometric shapes, lines, and patterns.
-
Pattern: Decorative patterns and repeating designs.
-
Organic: Backgrounds featuring natural shapes and textures.
-
Minimal: Simple, understated background designs.
-
Transparent: Background designs available in the Transparent category.
-
Lifestyle: Lifestyle-inspired images and textures.
-
Dark: Darker background images and designs.
Each category displays available background designs with thumbnail previews and names.
Click the thumbnail of the background you want to use.
Tile Backgrounds and Full Backgrounds
The Background Library includes two types of designs.
Tile Backgrounds
Tile backgrounds are smaller images designed to repeat across the background area.
Zibster recommends tile backgrounds for faster loading times. These work especially well for decorative patterns, textures, and geometric designs.
Full Backgrounds
Full backgrounds use larger images instead of small repeating patterns.
These backgrounds are useful when you want to display a decorative design or photograph behind your block's content.
Both types allow you to adjust how the background displays using the BACKGROUND SETTINGS described in Step Five.
STEP FIVE
Adjust Your Background Image Settings
When using a Custom Background or an image from the Background Library, you can control how the image appears within your block.
Scroll to BACKGROUND SETTINGS and choose from the following options:
-
TILE: Repeats the background image to fill the available space. This option works especially well with smaller patterns and textures.
-
TOP LEFT: Aligns the background image to the upper-left corner of the available space.
-
CENTERED: Positions the background image in the center of the available space.
-
COVER: Scales the background image to completely cover the background area. Depending on the dimensions of the block, portions of the image may be cropped.
Choose the setting that works best for your background image and website layout.
For photographic backgrounds, COVER is often a good choice because it fills the available space. For repeating textures or patterns, TILE can provide a more consistent appearance.
These settings apply to background images. Video backgrounds automatically fill the available background space and do not have additional positioning or sizing settings.
FINAL STEP
Save Your Background Changes
After choosing your background and adjusting any available settings, click SAVE CHANGES.
Your selected background will be applied to the block on your website.
You do not need to publish your website separately.
You can return to the BACKGROUND section at any time to choose a different image, select another design from the Background Library, adjust your image settings, or remove an existing background.
Using Video Backgrounds in Zibster
In addition to background images and colors, Zibster supports video backgrounds on select Website Builder blocks.
Video backgrounds are available for these six blocks:
-
Text Editor Block
-
Text + Image Block
-
Images Block
-
Banner Block
-
List Block
-
Form Block
You can upload your own video to Zibster or choose from the Background Video Library, which includes 16 predesigned video backgrounds.
Videos from the Background Video Library automatically play, loop continuously, display without sound, and work on desktop and mobile devices.
If you're using your own video, we recommend uploading it directly to Zibster rather than using an external embed, which may require additional autoplay configuration.
For complete instructions on adding video backgrounds, choosing from the available designs, and understanding video playback requirements, see How to Add a Video Background to a Block in Zibster.
What Your Website Visitors See
Visitors will see your selected background behind the content of the block you customized.
Image Backgrounds
Custom images and Background Library designs appear behind your block's content.
Repeating patterns can fill the background area, while larger images can scale to cover the available space.
Background images may display differently on desktop, tablet, and mobile devices because the available space changes with screen size. Images using COVER may be cropped differently depending on the dimensions of the block.
Solid Background Colors
If you selected NO BACKGROUND, visitors will see the block's configured background color instead of a background image or video.
Video Backgrounds
When you use a video background on a supported block, visitors will see the video playing behind the block's content.
Videos from the Background Video Library play automatically, loop continuously, and display without sound.
Playback behavior for custom videos can depend on the video source and browser requirements. See the dedicated video background guide for additional information.
We recommend reviewing your website on desktop and mobile after changing a background to make sure your content remains readable and your design looks the way you want.
Helpful Notes
Block Backgrounds vs. Website Backgrounds
The BACKGROUND settings covered in this guide allow you to customize an individual block without changing the rest of your website.
You can also customize your website's overall background through DESIGN settings. This is useful when you want to apply a background image to your website rather than an individual block.
For complete instructions, see How to Customize Your Website's Background Image in Zibster.
Choose Backgrounds That Complement Your Content
Background images can add visual interest to your website, but busy patterns and photographs can make text harder to read.
Choose backgrounds that provide enough contrast between your content and the image behind it.
You can also use the block's COLORS settings to adjust text colors when needed.
Use Tile Backgrounds for Faster Loading
Zibster recommends tile backgrounds in the Background Library for faster loading times.
If you upload your own background image, use an appropriately sized JPG or PNG file to help your website load efficiently.
Check Your Background on Mobile Devices
Background images using COVER may be cropped differently on smaller screens.
Review your website on desktop and mobile devices to make sure important parts of your background remain visible and your content is easy to read.
Customize Each Block Individually
Background settings apply only to the block you're editing.
You can use different background images or colors across your website without changing the backgrounds of other blocks.
NEED HELP?
Have questions or need a hand? Contact our Support Team for help with your Zibster website and account.
Phone: 844.353.3412
Support Channels: Phone, Live Chat, Support Ticket
