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

To disable right-clicking on images and reduce image downloads on your Webflow portfolio, you can use custom code, but be aware this is only a mild deterrent—it doesn't fully protect images.

​

1. Add Custom Code to Disable Right-Click Sitewide

​

• Go to Project Settings > Custom Code > Footer Code.
• Paste the following JavaScript (inline):  

  document.addEventListener('contextmenu', event => event.preventDefault());

• This prevents the context menu from appearing anywhere on the page.
• Click Save, then Publish your site.

​

2. Limit Right-Clicking on Images Only

​

If you prefer to allow right-clicks elsewhere, but not on images:

​

• In the Page Settings > Custom Code > Footer Code, add:  

  document.querySelectorAll('img').forEach(img => img.addEventListener('contextmenu', e => e.preventDefault()));

• This disables right-clicking specifically for all <img> elements.

​

3. Use Background Images Instead

​

• In Webflow, you can set images as backgrounds on divs instead of using <img> elements.
• Background images don’t show up in the context menu as easily and are harder to download directly.
• To apply this, select a Div Block and set the image using Background Image in the Styles panel.

​

4. Additional Deterrents (Optional)

​

• Overlay a transparent div over your image, which captures click and right-click events.
• Use lower resolution or watermarked images to reduce the value of downloaded files.
• Disable drag behavior: include  

  ondragstart="return false;" in your image tag (if using Embed HTML).

​

Summary

​

To prevent right-clicking on images in Webflow, use custom JavaScript to block context menus sitewide or just on images. For stronger deterrents, consider using background images or overlays, but note that no method can fully stop tech-savvy users from downloading images.