How to Add a Watermark to Images on Your Zibster Website
Overview
You can add a watermark to supported images displayed on your Zibster Website by adding custom code to your Website Builder design settings. The default code uses a copyright symbol watermark and places it in the center of supported website images.
You can also replace the standard copyright symbol with your own logo or custom watermark image by uploading a PNG to your Zibster account and adding its direct file URL to the code.
This guide applies specifically to images displayed on your Zibster Website. Zibster Mood Boards use separate built-in watermark settings, including an option to upload a custom PNG watermark. If you want to watermark images in Mood Boards, see How to Add a Watermark to Zibster Mood Boards.
STEP ONE
Log in to your Zibster account and click WEBSITE in the left-side menu.
This opens the Website Builder, where you can manage your website pages, navigation, and design.
STEP TWO
Click DESIGN at the top center of the Website Builder.
This opens the design area for your website.
STEP THREE
Click EDIT DESIGN SETTINGS to open your website's global design settings.
STEP FOUR
Click CSS/JS in the right-side panel. Paste the complete watermark code into the BODY area.
Because this code contains JavaScript as well as CSS, it must be added to the BODY area for the watermark to work correctly.
If you already have custom code in the BODY area, keep your existing code and add the watermark code above or below it. Do not replace code that is already there.
Copy and Paste This Watermark Code
Copy the complete code below and paste it into the BODY area under CSS/JS.
The default code uses a copyright symbol watermark. If you want to use the standard watermark, you do not need to change anything in the code.
Copy and paste this code into the BODY area:
FINAL STEP
Click SAVE CHANGES to apply the watermark code to your website.
Open your live website and review several pages that contain images. You should see the copyright symbol centered over supported website images.
The watermark is applied automatically as supported images load, including images that appear after the initial page load.
What Your Website Visitors Will See
When the watermark code is active, visitors will see the watermark displayed in the center of supported images on your Zibster Website.
The default code uses a standard copyright symbol watermark. The watermark automatically scales to fit the image and uses partial transparency so your photograph remains visible underneath it.
The watermark appears as an overlay on the website. It does not permanently change or add the watermark to the original image file stored in your Zibster account.
How to Use Your Own Watermark Image
You can replace the standard copyright symbol with your own logo, copyright graphic, or custom watermark image.
For the best appearance, use a transparent PNG so your watermark displays cleanly over your photographs.
To use your own watermark:
- Upload your watermark image to the FILES section of your Zibster account.
- Copy the direct URL for the uploaded image.
- Return to WEBSITE, click DESIGN, click EDIT DESIGN SETTINGS, and open CSS/JS.
- Locate the watermark code in the BODY area.
- Find this line:
var watermarkURL = "/content/proofing/images/default_watermark.png";- Replace only the URL between the quotation marks with the direct URL for your uploaded watermark image.
For example:
var watermarkURL = "https://your-file-url.png";- Click SAVE CHANGES and refresh your live website to review your custom watermark.
Keep the quotation marks around the image URL and leave the rest of the line unchanged.
How This Watermark Works
The code creates a visual watermark that appears over supported images displayed through the Zibster Website Builder.
The watermark:
- Appears in the center of the image.
- Automatically scales based on the available image space.
- Uses partial transparency so the photograph remains visible.
- Does not interfere with links, buttons, or other actions on the page.
- Keeps supported image captions and text visible above the watermark.
- Automatically applies as supported images load.
The default code limits the watermark to 38% of the available image width or 190 pixels, whichever is smaller.
Does This Change My Original Images?
No. The watermark is displayed as an overlay on your website. It is not permanently added to the original image file stored in your Zibster account.
Your original uploaded image remains unchanged.
Because the watermark is displayed as an overlay, it should be used as a visual deterrent rather than permanent protection for the original image file.
Website Watermarks vs. Mood Boards Watermarks
Website watermarks and Mood Boards watermarks are separate features in Zibster.
The custom code in this guide applies only to supported images displayed on your Zibster Website.
Zibster Mood Boards have their own built-in watermark controls. In Mood Boards, you can:
- Enable or disable watermarking.
- Adjust the available watermark visibility settings.
- Upload a custom PNG watermark specifically for Mood Boards images.
Changes you make to the Website watermark code do not affect watermark settings in Mood Boards. Changes to Mood Boards watermark settings do not affect images on your Website.
For Mood Boards instructions, see How to Add a Watermark to Zibster Mood Boards.
Additional Options or Helpful Notes
- You can use the default copyright watermark without uploading an additional file.
- A transparent PNG is generally the best format for a custom Website watermark.
- Your custom watermark image should have enough contrast to remain visible over both light and dark photographs.
- If you replace your custom watermark image later, update the
watermarkURLin the code with the direct URL for the new file. - The watermark code is added to your global Website design settings, so you do not need to add it separately to each page.
- Images added through third-party code, embedded content, or custom HTML may not use the same Zibster image elements and may not receive the watermark.
- The watermark is an on-screen overlay and does not prevent someone from taking a screenshot.
- Keep any other code already stored in your BODY area unless you specifically intend to remove it.
How to Remove the Website Watermark
To remove the watermark from your Zibster Website, return to WEBSITE, click DESIGN, click EDIT DESIGN SETTINGS, and open CSS/JS.
Locate the watermark code in the BODY area and remove the complete snippet without removing any other custom code you want to keep.
Click SAVE CHANGES, then refresh your live website. The watermark should no longer appear over your website images.
Removing this code does not affect any watermark settings you have configured separately in Mood Boards.
Troubleshooting or FAQs
The Watermark Does Not Appear
Confirm that you pasted the complete code into the BODY area under CSS/JS and clicked SAVE CHANGES.
Refresh your live website and check a page containing supported images. If you still see the previous version of the page, try a hard refresh or clear your browser cache.
I Added the Code to the HEAD Area and the Watermark Is Not Working
Move the complete watermark code to the BODY area under CSS/JS.
This code contains JavaScript and should be placed in the BODY area for the watermark to work correctly. Click SAVE CHANGES after moving the code, then refresh your live website.
My Custom Watermark Does Not Appear
Check the watermarkURL line and confirm that you replaced only the URL between the quotation marks.
The URL must be a direct link to the image file. Open the URL in your browser to confirm that the watermark image loads by itself.
I See the Default Copyright Symbol Instead of My Custom Watermark
The default watermark URL is still being used in the code.
Find this line:
var watermarkURL = "/content/proofing/images/default_watermark.png";
Replace the URL between the quotation marks with the direct URL for your custom watermark image, then click SAVE CHANGES.
Will the Watermark Be Added to My Original Files?
No. The watermark is displayed over images on your website and does not modify the original files stored in your Zibster account.
Does the Website Watermark Prevent Screenshots?
No. A watermark can discourage unauthorized image use and help identify your work, but it cannot prevent someone from taking a screenshot.
Can I Use My Photography Logo as the Watermark?
Yes. Upload your logo to the FILES section and use its direct file URL as the watermarkURL. A transparent PNG usually provides the best results.
Why Doesn't the Watermark Appear on an Image Added With Custom Code?
The watermark code is designed for supported images displayed through the Zibster Website Builder. Images added through third-party widgets, embedded code, or custom HTML may not use the same Zibster image elements and may not receive the watermark automatically.
Will This Add a Watermark to My Mood Boards?
No. This code applies only to supported images on your Zibster Website.
Mood Boards use separate built-in watermark settings. See How to Add a Watermark to Zibster Mood Boards for instructions.
Will Changing My Mood Boards Watermark Change My Website Watermark?
No. Website watermarks and Mood Boards watermarks are managed separately. Changing one does not change the other.
Related Articles
For more information about adding custom code to your website, see How to Add Custom CSS to the Website.
For information about watermarking images in Mood Boards, see How to Add a Watermark to Zibster Mood Boards.
Need Help?
Zibster Support Hours: Monday–Friday, 9am–6pm EST
Phone: 844.353.3412
Channels: Phone, Live Chat, Support Ticket
