# Protecting Images

**URL:** <https://community.sitejet.io/t/protecting-images/3351>\
**Category:** Website Builder\
**Tags:** cms\_content\
**Created:** [June 9, 2024, 4:07am UTC](https://community.sitejet.io/t/protecting-images/3351 "2024-06-09T04:07:39Z")\
**Posts on this page:** 11\
**Page:** 1

<div class="post-metadata">

**Author:** ![B\_B11](https://avatars.discourse-cdn.com/v4/letter/b/dc4da7/32.png) [@B\_B11](https://community.sitejet.io/u/B_B11)\
**Post date:** [June 9, 2024, 4:07am UTC](https://community.sitejet.io/t/protecting-images/3351/1 "2024-06-09T04:07:39Z")

</div>

I want to protect the images on my site from right-click download. I found this cms code:

```auto
img {
   pointer-events: none;
}

```

This works really well, the problem is it disables all pointer actions, like hover effects with the mouse. Is there a way to prevent download but still have hover effects?

Thanks so much!

---

<div class="post-metadata">

**Author:** ![Andre](https://dub1.discourse-cdn.com/flex017/user_avatar/community.sitejet.io/andre/32/3459_2.png) [@Andre](https://community.sitejet.io/u/Andre)\
**Post date:** [June 10, 2024, 12:24pm UTC](https://community.sitejet.io/t/protecting-images/3351/2 "2024-06-10T12:24:52Z")

</div>

Hey there,

have you tried other ideas from this Stack Overflow? [html - Protect image download - Stack Overflow](https://stackoverflow.com/questions/21110130/protect-image-download#:~:text=.%20Disable%20the%20Right%20Click%20on%20all%20Images)

Re: [How to protect images from being downloaded](https://community.sitejet.io/t/how-to-protect-images-from-being-downloaded/3227)

---

<div class="post-metadata">

**Author:** ![Scott\_Shell](https://dub1.discourse-cdn.com/flex017/user_avatar/community.sitejet.io/scott_shell/32/2882_2.png) [@Scott\_Shell](https://community.sitejet.io/u/Scott_Shell)\
**Post date:** [September 6, 2024, 3:56am UTC](https://community.sitejet.io/t/protecting-images/3351/3 "2024-09-06T03:56:23Z")

</div>

Please clarify:

Where, specifically, should one add the CSS code shown above?

EXAMPLES:

- in each an every image’s properties via the “Edit CSS” menu
- somewhere in the index.html file
- elsewhere / via other means

Thank you.

---

<div class="post-metadata">

**Author:** ![Andre](https://dub1.discourse-cdn.com/flex017/user_avatar/community.sitejet.io/andre/32/3459_2.png) [@Andre](https://community.sitejet.io/u/Andre)\
**Post date:** [September 9, 2024, 9:43am UTC](https://community.sitejet.io/t/protecting-images/3351/4 "2024-09-09T09:43:51Z")

</div>

Hey there Scott,

did you see this thread?

> [@How to protect images from being downloaded](https://community.sitejet.io/t/how-to-protect-images-from-being-downloaded/3227):
>
> Hello! I was wondering if there is a way to protect images on my website from being “right clicked” and saved? Thank you cherry_blossom

It says:

Like to quote an important point though:

> there is no 100% protection against image download

Aside from that, some Sitejetters have used the solution

> ```auto
> img {
> pointer-events: none;
> }
> 
> ```

… that usually worked quite well. just put it in the CSS - right on top.

---

<div class="post-metadata">

**Author:** ![Scott\_Shell](https://dub1.discourse-cdn.com/flex017/user_avatar/community.sitejet.io/scott_shell/32/2882_2.png) [@Scott\_Shell](https://community.sitejet.io/u/Scott_Shell)\
**Post date:** [September 9, 2024, 7:06pm UTC](https://community.sitejet.io/t/protecting-images/3351/5 "2024-09-09T19:06:16Z")

</div>

Thank you, Andre.

I reviewed the referenced thread; however, am still unclear as to the exact location required/into which specific CSS resource I must paste the sample CSS code.

Please clarify.

---

<div class="post-metadata">

**Author:** ![Andre](https://dub1.discourse-cdn.com/flex017/user_avatar/community.sitejet.io/andre/32/3459_2.png) [@Andre](https://community.sitejet.io/u/Andre)\
**Post date:** [September 10, 2024, 7:37am UTC](https://community.sitejet.io/t/protecting-images/3351/6 "2024-09-10T07:37:28Z")

</div>

> [@Andre](#):
>
> just put it in the CSS - right on top.

Does this help? 🙂

---

<div class="post-metadata">

**Author:** ![Scott\_Shell](https://dub1.discourse-cdn.com/flex017/user_avatar/community.sitejet.io/scott_shell/32/2882_2.png) [@Scott\_Shell](https://community.sitejet.io/u/Scott_Shell)\
**Post date:** [September 10, 2024, 6:44pm UTC](https://community.sitejet.io/t/protecting-images/3351/7 "2024-09-10T18:44:21Z")

</div>

Unfortunately, no.

1. From the Sitejet editor, I right-clicked on one of my images.
2. I selected: “Edit CSS”
3. I pasted the referenced code at the very top of the displayed CSS (on the 1st line beneath the greyed-out comments, above.
4. I saved and published the changes then quit the Sitejet editor.
5. After several hours and numerous page reloads, I see zero changes. I am still able to right-click on the affected (and all other) image(s) on my website.

---

<div class="post-metadata">

**Author:** ![Scott\_Shell](https://dub1.discourse-cdn.com/flex017/user_avatar/community.sitejet.io/scott_shell/32/2882_2.png) [@Scott\_Shell](https://community.sitejet.io/u/Scott_Shell)\
**Post date:** [September 10, 2024, 8:19pm UTC](https://community.sitejet.io/t/protecting-images/3351/8 "2024-09-10T20:19:45Z")

</div>

attached: example

 ![example](https://europe1.discourse-cdn.com/flex017/uploads/sitejet/original/2X/7/74a8cb47c8701dcd6d4f80db601f16d2380a2c40.jpeg)

---

<div class="post-metadata">

**Author:** ![Lucian\_Dinu](https://dub1.discourse-cdn.com/flex017/user_avatar/community.sitejet.io/lucian_dinu/32/141_2.png) [@Lucian\_Dinu](https://community.sitejet.io/u/Lucian_Dinu)\
**Post date:** [September 11, 2024, 6:48am UTC](https://community.sitejet.io/t/protecting-images/3351/9 "2024-09-11T06:48:14Z")

</div>

Hi!  
It’s not possible to protect images from being downloaded.  
The above CSS code will disable all the pointer events (including to right click) for all images. However, the user will still be able to download them using the “Inspect elements” option or by installing a browser add-on.

If you still want to disable the pointer events for images it is better if you do this only for specific images that you really need. So, … instead of targeting all images you can create a class and apply that class to the image.

Here is the updated CSS code

```auto
.no-events{
    pointer-events: none;
}

```

Here is how:

1. Add the CSS code to your website  

2. Add the class to the image that you want to disable the events  

Hope this helps!

---

<div class="post-metadata">

**Author:** ![Scott\_Shell](https://dub1.discourse-cdn.com/flex017/user_avatar/community.sitejet.io/scott_shell/32/2882_2.png) [@Scott\_Shell](https://community.sitejet.io/u/Scott_Shell)\
**Post date:** [September 11, 2024, 8:50pm UTC](https://community.sitejet.io/t/protecting-images/3351/10 "2024-09-11T20:50:28Z")

</div>

Thank you for the added details, Lucian.

I can confirm that everything is working as expected now.

I completed the following steps (per your instructions, above):

* * *

1. create a class (globally, via the Sitejet **\<…\> Code** / Global CSS editor):

```auto
   .no-events{
         pointer-events: none;
     }

```

1. from the Sitejet editor, apply this class to individual images:

---

<div class="post-metadata">

**Author:** ![Andre](https://dub1.discourse-cdn.com/flex017/user_avatar/community.sitejet.io/andre/32/3459_2.png) [@Andre](https://community.sitejet.io/u/Andre)\
**Post date:** [December 4, 2024, 1:14pm UTC](https://community.sitejet.io/t/protecting-images/3351/11 "2024-12-04T13:14:39Z")

</div>

Closed on December 4, 2024, 1:14pm UTC