Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

How to reduce the size of image with cursor url?

Tags:

html

css

I have an image with size 105x105. I am using it as cursor using this CSS script:

.class_1 .child_1 {
    cursor: url(theBell.png) 20 20, auto;
}

The image appears when I move the mouse over element, but it is too large.

I do not know how to reduce size of cursor.

I had some searching but found no positive results.

like image 895
Thanh Dao Avatar asked Nov 15 '15 01:11

Thanh Dao


People also ask

What size should a cursor image be?

While the specification does not limit the cursor image size, user agents commonly restrict them to avoid potential misuse. For example, on Firefox and Chromium cursor images are restricted to 128x128 pixels by default, but it is recommended to limit the cursor image size to 32x32 pixels.

How do I resize a custom cursor in CSS?

Checked it, I guess it is not possible to natively change the cursor's size. One thing you can do is to hide the cursor using the following code: cursor: none; And use an image, which follows the cursor, and style it using CSS, for its width and height .

Can you set an image to be shown as cursor?

Answer: Use the CSS cursor propertygif or . png (for Firefox, Chrome, Safari) and . cur for (for Internet Explorer). After that apply the cursor property with a comma-separated list of URLs pointing to these cursor images.


1 Answers

Unfortunately you can't reduce the size of the cursor. You need to reduce the size of the image. 36 * 36 px is the recommended size.

Some more useful information here https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_User_Interface/Using_URL_values_for_the_cursor_property

like image 68
Darren Gourley Avatar answered Oct 12 '22 02:10

Darren Gourley