The cursor seems to be malfunctioning and not displaying correctly

Need help changing the cursor on my website. The cursor I want to use is:

(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAAFQklEQVRYCe2XW2wUVRjH/3u/lZZuWxEEW2kJVyumJUYexAupiRgiYlIl8fKKEiMxsQnKC28mXghGCVVo0ojXBwQaJcHEG1i1LYsoS1tuDV0ohd3t7rYz58zMmXPMme6ks1LJFgpPTvLPTnZ39vud//ed73wL/H9NOBAYHh7eaBjG99FotHTi7dt3V8057zIMQ2ia1rdp06Y5AFy3LzzwAOf8sK5rQlVVQYg61NrauhSA+3ZBrGKMHdZ1XWSzWUu5XC5z4MCBVQA8twqiYHVCCOJ2y7cEdF2DptGylSsfPHTkyE/rAfhuBUQBAOdc55wjEAhA13VLmqYFa+fX7Y3FYi8D8E83hBNAANCFEHC5XPB4PNIBS4QS78yZpe/H4/FtAILTCeEEAOecSADOBUoiJTB0AxqllighLhd4S19vbyuA8HRBOAEEY4wLCEgI6UBpaSkopQVS1bHn+06d3A+gZDognADSgTEhEQQHM00QSkCoCqqRAqUz6dUnThz/taGhofJmIZwA0gG3XP24OGbdcSfa23bnU0BByYRSyav37tz54bHNmzfPv5mGVQBgGMaoXL0NYZomZs+egyvDw6CUXKNU8sq8dU+t6dqxY8eKG+0VBQCMMSGDyyKUr8xkeHLtOmx/721IGELUa5RMJqN1tTU/tLe3PQ7AO9WUFABQqmq2/bYLtXUL4PX60N/XC0LIpBoZSYVDQf83X32+98Wp9gonANc0Q1pgrV42JJkOw9Cxbn0z2nbvQjgSvsYB25VsNuNTNWXXvn1fvwEgUKwTTgBBKTXHA9sQ4+l4Ys1a6/d+7+yErumghEyqsVzOc+ni4LYvPvt0S7ENywnACSH5RjRRiBJoZnk55s2rxrcd+zH37mqolPynFFVxJS4ObC0rK7urGBecAIIQ4vp3CmQauGni2Q0vWKn5ruMgli6pt7vjpE6EwuFUNputKmZ7OgF4Mpmkzm1oNSUuwIXAwsXL4PV6ceZMP3z+EOrrG6wOOd6sZMOakM8X+CtfjPJ8ue7lBDDlVrO2oCxAzq3A9q4IBPxo3vASLg9dxN723VAJxX3LG2FoOjRCCtTff7oXgHrdyPkPnQB8cHDQkAHliu3A8p6b3OoDcjvOmFEKwzDw0QfvYOjSJdQvbwRjsm1TS4bBRGvrnssArk4VQDpgNSIr7xIify6Y0g0uoCgqRkdzSKdTyIykEQz6cfxYD6pr6mAyExoliFZWDOVyuZM3AsATiQSXs4Ad2C5ICSSnU7fHhfXPNFsOhCMl8tzEwkUL0Hn0R2t7yhnW7/P/mQ9OpuoAi8fjmgVgNyN5LlgNScDldiGdSuPhR1dj4yuvIhwKwWQMhsHwyGNNKI9WYfHS+0nnb12nAOSsua4IAmcNaD09PUG3252ZqAG7Fsbng5GRDBhjKI+W47XXW6y6kIXLmIF75tewWCy2p6Pj0FkAw0XEtr7iBBhVFEVrbFzxXDgc2RIKhYfkgGrBcA6vxwNFVUCpJucGhCMRhEJhC0hCuT3u9Lkz5xQARwGkigVwnl7y4VMDAwNPV1ZWLolEIm9euHDBQ4j6lmHo1abJ8weRCp9/fECurKpCJptGKBiJt7RsPaEoys8AzsvZ8kYAGABp35cAlimKsqKioqIWwPbu7u4xr9f7rjKm/KFr+kOCc78ASEnJjLOn+8/3fvxJm4SXY1o3AHlf9DXZXy+ZlggA+ddsIYAGAIsAmABqmpqazicSiVA8Ho8CuAIgBuAXAH8DyBZbfDbhZADOz+T0OwvA3PwQKlMmh1EJkwaQyRecLDrNfnAqr/8A7qzs+X+0h68AAAAASUVORK5CYII=)

Tried several methods but still unable to display it on the site. Current code snippet:

html {
  cursor: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAAFQklEQVRYCe2XW2wUVRjH/3u/lZZuWxEEW2kJVyumJUYexAu...
htmlcss

Answer №1

Upon reviewing your code, I came across a typo that was causing an issue. By removing the starting quotation mark, the problem was resolved. It is important to remember that the background color, height, and width were only included for demonstration purposes.

html {
  width: 100%;
  height: 20vh;
  background-color: red;
  cursor: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAAFQklEQVRYCe2XW2wUVRjH/3u/lZZuWxEEW2kJVyumJUYexAupiRgiYlIl8fKKEiMxsQnKC28mXghGCVVo0ojXBwQaJcHEG1i1LYsoS1tuDV0ohd3t7rYz58zMmXPMme6ks1LJFgpPTvLPTnZ39vud//ed73wL/H9NOBAYHh7eaBjG99FotHTi7dt3V8057zIMQ2ia1rdp06Y5AFy3LzzwAOf8sK5rQlVVQYg61NrauhSA+3ZBrGKMHdZ1XWSzWUu5XC5z4MCBVQA8twqiYHVCCOJ2y7cEdF2DptGylSsfPHTkyE/rAfhuBUQBAOdc55wjEAh...

</html>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Struggling with Responsive Design Challenges with Grid Material UI?

Encountering an issue while using the Grid Component in my React JS Project. Let's delve into some code and then I'll explain what I aim to achieve with images: Assuming this is the rendered code: <div style="margin:100px 20%; width:80%" &g ...

cssreactjsresponsive-designmaterial-ui

What are some tactics for avoiding movement in the presence of a border setting?

I created a webpage that has the following structure: .topbar-container { width: 100%; position: fixed; top: 0; background-color: #2d3e50; z-index: 999; display: flex; transition: height 500ms; } @media (min-width: 992px) { .topbar-cont ...

javascripthtmlcss

Using Javascript to dynamically add and remove elements on click

Whenever I click on a link, I am able to generate input, label, and text. However, I want to be able to delete these elements with the next click event on the same link: I've tried updating my code like this: var addAnswer = (function() { var la ...

javascripthtml

Implementing a video background within a dynamic two-column layout, accompanied by text within a separate column

While viewing on a large screen with Bootstrap 5, everything looks good: https://i.sstatic.net/Vm6bH.png However, when I resize the screen, the text in the first column overflows onto the sections below instead of adjusting properly. https://i.sstatic.n ...

cssbootstrap-5

Design a customizable overlay with a moveable and size-adjustable layer below it

After working with kineticjs, I successfully created an app that allows images to be draggable and resizable, which is great progress; Now, I am facing a challenge: I want to have an overlay in the center with a block of variable height/width that display ...

javascripthtmlhtml5-canvaskineticjs

Style sheets for two dynamically-sized boxes side by side

There are two boxes or columns positioned on the same line. Both have varying widths that need to remain on the same row. To clarify: .----------container 570px-----------. |[box1] [box2]| Ideal scenario | ...

htmlcss

How can I align the starting point of a Bootstrap div col to the center?

Is it possible to change the layout from this https://i.sstatic.net/Dc8Yi.jpg to this https://i.sstatic.net/TcQU0.jpg? I want the content added to always start from the center and spread to both sides, like in the second image. Can this be achieved? Here ...

htmlcsstwitter-bootstrapbootstrap-4styles

What is the best way to create a seamless background transition for buttons on a mobile device?

Currently, I am working on my random quote generator project and I am trying to make it so that when the button is touched on a mobile device, the background color becomes semi-transparent. Below is the code I am using: #loadQuote { position: fixed; w ...

htmlcssfrontend

The margin of a single flexbox item is not aligned properly

The flexbox I have contains several items. All of them are displaying correctly except for the last one, which is expanding to the edge of the div. View the current appearance of the flexbox As shown in the image, the last element is extending to the con ...

htmlcssflexbox

Implementing notifications in React JS

Hey there! I'm new to React JS and I need some guidance on how to add notification with action buttons in my PWA. Is there any specific way to achieve this in React JS? I have been attempting to integrate notifications into my progressive web app usi ...

javascripthtmlcssreactjs

Issue with margin-top on <p> and <a> elements not displaying correctly?

I've been attempting to incorporate margin-top for a link button, but unfortunately it's not working as expected. I've even experimented with inline styles for both the 'p' and 'a' tags. There are three list elements, I ...

htmlcssmargin

What is the best way to extract data from my Selenium outputs using BeautifulSoup?

Struggling with a script to automate the process of filtering stocks on Yahoo Finance and extracting ticker names, I encountered an issue where BeautifulSoup was pulling data before filters were applied. How can I scrape the updated HTML code once changes ...

pythonhtmlseleniumbeautifulsoup

Selenium typically only returns a portion of the script tag's content when using InnerText and InnerHTML

Seeking to automate front-end tests for a client's webpage in Selenium (java), I am faced with the challenge of extracting data from within the <script></script> tag in the provided HTML. <html> <head>...</head> <body& ...

javahtmlseleniumselenium-webdriver

Error loading console due to JSON data on website

After creating a Json data file named question.json with the following content: "Endocrinology":[ { "title":"Endocrinology", "id": "001", "date":"08J", "question":"In adult men, anterior pituitary insufficiency does not caus ...

javascriptjqueryhtmljson

What is the reason behind loading two srcset images?

When it comes to creating responsive web templates, I make use of the srcset attribute in order to load different images based on the current viewport size. This has been working well overall. However, in production mode, the images are fetched from a Digi ...

htmlimageperformanceresponsive-imagessrcset

What steps should I take to modify the URL using the SELECT tag?

Having a bunch of SELECT tags in place <select id="url"> <option id="url1" >url 1</option> <option id="url2" >url 2</option> </select> <button onclick="go()">GO</button> Followed by the associated scrip ...

javascriptjqueryhtmlajax

Instructions for dividing a screen into two halves, either with a 20/80 or 30/70 split, using HTML

I've set up my HTML structure like this: <div class="row"> <div class="col"> <div class="leftside"> ...content for leftside goes here... </div> </div> <di ...

htmldjangobootstrap-4

Insert an array of objects into the td elements of a pre-existing table

Currently, I have a table where the td cells are intentionally displayed as blocks. My aim is to insert labels inside each of these td cells by creating spans with specific classes and then prepend them to the table cell. To achieve this, I am utilizing an ...

javascripthtmlarraysobject

Customizing popups and tooltips in Material-UI charts

Has anyone had success with customizing the appearance of the popover/tooltip in mui charts? It seems like it should be a simple task, but despite searching extensively, I have only found information on formatting data and nothing about styling the CSS. ...

cssreactjsmaterial-uimui-xmui-x-charts

Animate owlCarousel slide motion in reverse when using the Prev and Next buttons

The default functionality of owlCarousel is to move to the right when clicking Next and to the left when clicking Prev. However, after applying animations, both directions always move in the same direction. Check out this sample on jsfiddle to see the iss ...

jqueryhtmlcssowl-carousel