How can I disable right-clicking on images to prevent downloading on my Webflow portfolio website?

To disable right-clicking on images in your Webflow portfolio site, you can use custom CSS and JavaScript to limit basic context menu access and image saving actions.

1. Use CSS to Block Image Dragging and Selection

• Go to your Webflow Designer.
• Select each image or your global image class (e.g., .portfolio-image).
• In the Style panel, add these custom style properties through the custom code area or an embed component:
• user-select: none;
• pointer-events: none; (optional—disables all interactions)
• -webkit-user-drag: none;

These styles make the images harder to drag or highlight.

2. Add JavaScript to Disable Right-Click

• Open Webflow Project Settings → Custom Code → Footer Code.

• Paste this JavaScript just before the closing </body> tag:

  Note: Webflow doesn't allow raw code here, but here's the explanation you can follow in your embed:

• Use the JavaScript method document.addEventListener('contextmenu', event => event.preventDefault());

• This disables the context menu across the entire site.

• Alternatively, add this in an Embed element in your site:

• Place an Embed into a page (or a Symbol for global use), and add:

  • <script>document.addEventListener('contextmenu', event => event.preventDefault());</script>

3. Obfuscate Image Downloads Further

• Serve images as CSS background-images instead of <img> elements.

• Add a div and set its Background Image via the Style panel.

• Right-click saving becomes much harder since the image isn’t directly in the DOM as a file.

• Use WebP or watermark low-resolution images if you're concerned about theft.

Summary

Disable right-click by combining CSS to prevent dragging/selecting, JavaScript to block the context menu, and optionally use background images for stronger protection. While these methods reduce casual theft, remember they’re not foolproof—determined users can still inspect or capture images.