How to Change a Block Background in Zibster
Overview
Zibster Website Builder allows you to customize the background of individual blocks on your website. You can upload your own background image, choose from Zibster's collection of predesigned backgrounds, or use a solid background color.
You can also control how a background image appears within a block, including its positioning, size, and whether it repeats. These options can help individual sections stand out while keeping your website design consistent.
This guide explains how to change a block background, use the Background Library, and customize how your background image displays.
STEP ONE
Log in to your Zibster account and click WEBSITE in the left-side menu.
STEP TWO
Click the page containing the block you want to customize.
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, you will see three options: NO BACKGROUND, CUSTOM BACKGROUND, and BACKGROUND LIBRARY.
STEP FOUR
Choose Your Background
Select the background option you want to use for the block.
NO BACKGROUND removes the background image from the block. With this option selected, the block uses the background color configured under COLORS. You can use the color picker there to choose a solid background color that complements your website design.
You can also select NO BACKGROUND whenever you want to remove an existing custom image or a design selected from the Background Library.
CUSTOM BACKGROUND allows you to upload your own background image. Under UPLOAD A NEW BACKGROUND, click ADD FILES to select 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 the best results, we recommend using an image that is approximately 3000 pixels wide by 1730 pixels high.
After uploading the image, you can adjust how it displays using the BACKGROUND SETTINGS described in the next step.
BACKGROUND LIBRARY allows you to browse Zibster's collection of predesigned backgrounds. Click the CATEGORY dropdown to browse the available categories, including Geometric, Pattern, Organic, Minimal, Transparent, Lifestyle, and Dark.
Each category displays available background designs with thumbnail previews and names. Click the background you want to use to select it.
The Background Library contains both Tile Backgrounds and Full Backgrounds. Tile Backgrounds use smaller images designed to repeat across the background area and are recommended for faster loading times. They work especially well with patterns, textures, and geometric designs.
Full Backgrounds use larger images instead of smaller repeating patterns. These are useful when you want a larger decorative design or photographic image behind the block's content.
Both types can be customized using the BACKGROUND SETTINGS.
STEP FIVE
Adjust Your Background Settings
When using a CUSTOM BACKGROUND or an image from the BACKGROUND LIBRARY, scroll to BACKGROUND SETTINGS to control how the image appears within the block.
Select TILE to repeat the image across the available background area. This works especially well with smaller patterns and textures.
Select TOP LEFT to position the background image in the upper-left corner of the available area.
Select CENTERED to position the background image in the center of the available area.
Select COVER to scale the image so it fills the entire background area. Depending on the dimensions of the block and the visitor's screen, portions of the image may be cropped.
For photographic backgrounds, COVER is often a good option because it fills the available space. For repeating patterns and textures, TILE generally provides a more consistent appearance.
You can return to these settings whenever you want to adjust how the background displays.
FINAL STEP
After choosing your background and adjusting its settings, click SAVE CHANGES.
Your changes will be applied to the selected block on your website. You do not need to publish your website separately.
You can return to BACKGROUND at any time to upload a different image, choose another design from the Background Library, change the display settings, or remove the background image.
What Your Website Visitors See
Visitors will see your selected background behind the content of the block you customized.
The appearance depends on the image and display settings you selected. Repeating patterns can fill the entire background area, while larger images can scale to cover the available space.
If you selected NO BACKGROUND, visitors will see the background color configured for the block instead of a background image.
Background images can 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.
Review your website on both desktop and mobile after changing a background to make sure your content remains readable and important parts of the image remain visible.
Helpful Notes
Block Backgrounds vs. Website Backgrounds
The BACKGROUND settings covered in this guide customize the background of an individual block without changing the rest of your website.
You can also customize your website's overall background through its design settings. This is useful when you want a background image applied to the website rather than to one individual block.
Use Images That Complement Your Content
Background images can add visual interest, but busy patterns and photographs can make text harder to read. Choose backgrounds that provide enough contrast between the content and the image behind it.
Choose Tile Backgrounds for Faster Loading
Zibster recommends the Tile Backgrounds available in the Background Library for faster loading times.
If you upload your own image, use an appropriately sized JPG or PNG file to help keep your website loading efficiently.
Check Your Background on Mobile Devices
Background images using COVER may crop differently on smaller screens. Review your website on mobile devices to make sure important parts of your image remain visible and your content remains easy to read.
Customize Each Block Individually
Background settings apply only to the block you are editing. You can use different background images or colors throughout your website without changing the backgrounds of other blocks.
Need Help?
Our Zibster Support Team is happy to help you customize your website.
Support Hours: Monday to Friday, 9am to 6pm EST
Phone: 844.353.3412
Support Channels: Phone, Live Chat, Support Ticket
