How to Add a Watermark to Images on Your PhotoBiz Website

Overview

You can add a watermark to supported images displayed on your PhotoBiz Website by adding custom code to your Website Builder design settings. The default code uses PhotoBiz's standard 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 PhotoBiz account and adding its direct file URL to the code.

This guide applies specifically to images displayed on your PhotoBiz Website. Client Galleries use a separate built-in watermark setting, including an option to upload a custom PNG watermark. If you want to watermark images in Client Galleries, see How to Add a Watermark to Your Client Galleries Images.

STEP ONE

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 PhotoBiz's standard 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:

<style>
  .pb-page-watermark {
    position: absolute;
    inset: 0;
    z-index: 20;
    display: flex;
    align-items: center;
    justify-content: center;
    pointer-events: none;
  }

  .pb-page-watermark img {
    display: block;
    width: min(38%, 190px);
    height: auto;
    max-height: 38%;
    object-fit: contain;
    opacity: 0.72;
  }

  /* Keep banner captions and text above the watermark */
  .gallery__caption {
    z-index: 21;
  }
</style>

<script>
(function () {
  var watermarkURL = "/content/proofing/images/default_watermark.png";

  function getImageContainer(image) {
    return image.closest(
      ".gallery__item, .images-carousel-image, .aspect-ratio"
    );
  }

  function addWatermarks() {
    var pageImages = document.querySelectorAll("img.u-img-anti-theft");

    pageImages.forEach(function (image) {
      var container = getImageContainer(image);

      if (!container) return;
      if (container.querySelector(":scope > .pb-page-watermark")) return;

      container.style.position = "relative";

      var watermark = document.createElement("div");
      watermark.className = "pb-page-watermark";

      var watermarkImage = document.createElement("img");
      watermarkImage.src = watermarkURL;
      watermarkImage.alt = "";
      watermarkImage.setAttribute("aria-hidden", "true");

      watermark.appendChild(watermarkImage);
      container.appendChild(watermark);
    });
  }

  addWatermarks();

  var observer = new MutationObserver(addWatermarks);
  observer.observe(document.body, {
    childList: true,
    subtree: true
  });
})();
</script>

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 PhotoBiz Website.

The default code uses PhotoBiz's 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 PhotoBiz account.

How to Use Your Own Watermark Image

You can replace the standard PhotoBiz 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 PhotoBiz 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 PhotoBiz 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 PhotoBiz 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. Client Galleries Watermarks

Website watermarks and Client Galleries watermarks are separate features in PhotoBiz.

The custom code in this guide applies only to supported images displayed on your PhotoBiz Website.

Client Galleries have their own built-in watermark controls. In Client Galleries, you can:

Enable or disable watermarking.
Use the available Client Galleries watermark settings.
Upload a custom PNG watermark specifically for Client Galleries images.

Changes you make to the Website watermark code do not affect watermark settings in Client Galleries. Changes to Client Galleries watermark settings do not affect images on your Website.

For Client Galleries instructions, see How to Add a Watermark to Your Client Galleries Images.

Additional Options or Helpful Notes

You can use the default PhotoBiz 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 watermarkURL in 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 PhotoBiz 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 PhotoBiz 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 Client Galleries.

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 PhotoBiz 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 PhotoBiz Website Builder. Images added through third-party widgets, embedded code, or custom HTML may not use the same PhotoBiz image elements and may not receive the watermark automatically.

Will This Add a Watermark to My Client Galleries?

No. This code applies only to supported images on your PhotoBiz Website.

Client Galleries use a separate built-in watermark setting. See How to Add a Watermark to Your Client Galleries Images for instructions.

Will Changing My Client Galleries Watermark Change My Website Watermark?

No. Website watermarks and Client Galleries watermarks are managed separately. Changing one does not change the other.

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 Client Galleries, see How to Add a Watermark to Your Client Galleries Images.

Need Help?

Support Hours: Monday to Friday, 9am to 6pm EST

Phone: 866.463.7620

Support Channels: Phone, Live Chat, Support Ticket

Previous Post Next Post

How to Hide the Logo Section Using Custom CSS in PhotoBiz

January 16, 2026

How to Hide the Home Page (or 1st Menu Item) Using Custom CSS in PhotoBiz

August 21, 2026

How to Hide View Previous & Next Post in Blog Posts Using CSS

March 5, 2026

How to Increase The Height of Story Panel Using CSS

March 5, 2026

How To Add a Watermark To My Website Images