How to Disable Drag Image Using CSS?

How to Disable Drag Image Using CSS?

Written by
Vinish Kapoor is a seasoned software development professional and a fervent enthusiast of artificial intelligence (AI). His impressive career spans over 20 years, marked by a relentless pursuit of innovation and excellence in the field of information technology. As an Oracle ACE, Vinish has distinguished himself as a leading expert in Oracle technologies, a title awarded to individuals who have demonstrated their deep commitment, leadership, and expertise in the Oracle community.
  • CSS
  • 1 min read

You can use the user-drag: none and user-select: none CSS properties to disable the dragging and selecting of images on your website. These properties can be applied to the img element or any containing element, like the div that wraps the image.

Here is an example of how you can use these properties to disable the dragging and selecting of images on your website:

img {
  user-drag: none;
  user-select: none;
}

Alternatively, you can use the pointer-events: none property to disable the dragging of images. This property can be applied to the img element or any containing element, and it will prevent the element from responding to pointer events (such as clicks, hover, and dragging). Here is an example of how you can use this property to disable the dragging of images on your website:

img {
  pointer-events: none;
}

It's important to note that these CSS properties will only work in modern browsers that support them. If you need to support older browsers, you may need to use JavaScript to disable the dragging and selecting of images.

Related: