Disable view background image

HTML & CSS
1

I’ve noticed when I visit some sites, right clicking to view an image is disabled, how are they able to do that.

Here is an example of one I found.
https://www.azumexsugar.com/

When you right click to view the image, it doesn’t work.

How are sites able to do this?

Is there a specific code that is used to do that?

image

2

Hi there asasass,

if you really wish to aggravate visitors and make
them leave your site in droves, use this javascript…

<script>
(function( d ) {
   'use strict';
    d.addEventListener( 'contextmenu', 
       function(e) {
          e.preventDefault();
         }, false);
}( document ));
</script>

It is a rather childish and amateurish thing to do. :rolleyes:

coothead

3

Hi there asasass,

as for the page that you linked to, I presume that you think that this…

https://static.wixstatic.com/media/2116b4_d1bc13fa95f14207854322f81a7ccd45.jpg(image larger than 4 MB)

…is a hidden background-image.

Well that is certainly not true. :unhappy:

If you click “View Source” and go to line #1032 you will find the
"img element " is buried amongst a whole bunch of CSS code !!! :rolleyes:

Validating the page consequently, revealed that the code has enumerable errors…

https://validator.w3.org/nu/?doc=https%3A%2F%2Fwww.azumexsugar.com%2F

coothead

3 Likes
4

I was just wondering how that is done.

5

How what was done? :wonky:

coothead

6

Disabling click view background image. Because I’ve been seeing it more and more.

7

“View Background Image” is a lighter grey shade not because it is
disabled, but because there is no background image to view. :rofl:

coothead

8

But if there is a picture there, how come “View Background Image” doesn’t work when you click that?

If it’s not a background image, what is it considered then?

9

It’s not a background image, it’s an img element. background-image is a CSS property, img is an HTML element.

Here you go:

1 Like
10

It is not considered anything, it is an “img element” .

coothead

11

You can right click and view an image element here.

But not here.
https://www.azumexsugar.com/

12

It looks like there’s a transparent div on top of the img element, so when you think you’re right-clicking on the image, you’re really right-clicking the transparent div. Kind of annoying. This isn’t a behavior I would recommend imitating.

I’m not even sure they were doing this to purposefully block people from viewing the image. It might have just been an accident. MANY years ago this sort of thing might have appealed to people who thought this would keep people from stealing their images, but that’s a very outdated way of thinking (anyone competent will be able to get to the image anyway), so I doubt that’s it. And if it is the case, that’s rather lame.

Pro tip: I see you’re using Firefox, so if you want to access any image on a page, you can right click anywhere on the page and choose “View Page Info” or “View Image Info”, and make sure you’re on the “media” tab of the window that pops up…then just keep scrolling through the images until you find the one you want.

2 Likes
13

Well, see what happens when you right click here…

https://jsfiddle.net/w7tn5jb8/

coothead

1 Like
14

oh, ok, that’s how that’s done.

Thanks.

15

 
 
        No problem, you’re very welcome. :winky:
 
 
        coothead

1 Like
16

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.