How to Add a Watermark to Images on Your PhotoBiz Website

Overview

You can add a watermark to images displayed on your PhotoBiz Website by adding custom CSS and JavaScript to your Website Builder design settings. The default code uses PhotoBiz's standard copyright symbol watermark and automatically 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. Add the complete watermark code to the HEAD area.

If you already have custom code in the HEAD area, keep your existing code and add the watermark code above or below it. Do not replace your existing code.

Copy and Paste This Watermark Code

Copy the complete code below and paste it into the HEAD area under CSS/JS.

The default version uses PhotoBiz's standard copyright symbol watermark. You do not need to change anything in the code if you want to use the standard watermark.

Copy and paste this code into the CSS field:

<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 automatically added as supported images load, including images that appear after the initial page load.

How to Use Your Own Watermark Image

You can replace the standard PhotoBiz copyright symbol with your own logo, copyright graphic, or other watermark image.

For the best appearance, use a transparent PNG with enough contrast to remain visible over both light and dark 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.
Find this line in the watermark code:

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 the new watermark.

Keep the quotation marks around your 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 to supported images as they 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 does not permanently add the watermark to the image file stored in your PhotoBiz account.

Your original uploaded image remains unchanged.

This also means the watermark should be considered a visual deterrent rather than a way to permanently protect the underlying image file.

Additional Options or Helpful Notes

You can use the default PhotoBiz copyright watermark without uploading any additional files.
A transparent PNG is generally the best format for a custom logo or watermark.
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 design settings, so you do not need to add it separately to each page.
Images added through custom or third-party code may not use the same PhotoBiz image elements and may not receive the watermark.
The watermark is an on-screen overlay. It does not prevent someone from taking a screenshot of an image.
Keep any other code already stored in your HEAD area unless you specifically intend to remove it.

How to Remove the Website Watermark

To remove the watermark, return to WEBSITE, click DESIGN, click EDIT DESIGN SETTINGS, and open CSS/JS.

Remove the complete watermark code from the HEAD area 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.

Troubleshooting or FAQs

The Watermark Does Not Appear

Confirm that you pasted the complete code into the HEAD 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.

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