When the background image URL is altered, the button size automatically adjusts

Presently, I am working with a button 

<input id="fireAction" type="button" class="submit" onclick="disableSubmit('preFlight');"><br>

Afterwards, I modify the background image of the button under different circumstances

For example:

#('#fireAction').css('background-image','url(fail.jpg)');
#('#fireAction').css('background-image','url(success.jpg)');

However, I am facing an issue because the size of fail.jpg / success.jpg is not the same. How can I define some CSS (I have tried width:auto but it is not working) to adjust the button size according to the size of the background image? Thank you

javascriptjqueryhtmlcssimage

Answer №1

Not sure if you're seeking a solution in JS, jQuery, or CSS, but in terms of CSS, you can't resize an element based on the background image. You can, however, use input type=image instead.

<input type="image" src="#" alt="Image" />

Alternatively, if you prefer JavaScript or jQuery, you can create two classes with custom widths and toggle between them based on your needs.

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

Modify the text color of the fixed navigation when hovering over specific divs

Sorry if this question has already been asked. I've searched online but haven't come across a satisfactory solution. On my website, I have different background colors - blue and white. The text color in my navigation is mostly white, but I want i ...

javascripthtmlcssscrolltextcolor

What steps should I take to develop an Outlook add-in that displays read receipts for action items in sent emails?

Currently, I am in the process of developing an add-in that will enable me to track email activity using a tool called lead-boxer (). With this add-in, I am able to retrieve detailed information about users who have opened my emails by sending them with an ...

javascriptoutlook-addinoffice-addinsoutlook-web-addins

Having trouble with Autocomplete Search feature in Laravel?

I have a search field with the same name and id on both my categories page and products page. The autocomplete suggestions are working fine, but when I click on a suggested product in the search field, it stays on the same page instead of redirecting me to ...

phpjquerylaravellaravel-5autocomplete

The elements in a Cheerio collection do not possess an innerHTML property

When using a cheerio query, I am having trouble locating the innerHTML property on the elements returned. In jQuery, the following code works perfectly, outputting Para 2. const d = $("p","<div><p>Para 1</p> <p>Para ...

jquerycheerio

Error encounter in JSP is nested within another JSP file, both of which utilize jQuery

Before proceeding, it is important to note that I am in the process of selecting a month using a datepicker and a specific meter (by its serial number). Once this information is selected, a query will be sent to a MySQL database to retrieve data for plotti ...

javascriptjqueryjspdatepicker

Utilizing a for loop in conjunction with JSON data

Can someone help me with this issue? I can only see Jimmy Cricket's name displayed, but I want to see all the names in li tags. Any assistance would be greatly appreciated. <ul id="members"></ul> <script> var teammembers = [ {"name" ...

javascriptjsonfor-loop

Show the button using jQuery when clicked, and hide anything else

I'm looking for a solution to close a div when clicking anywhere on the page, rather than having to click the same button again. Currently, I have a toggle() function set up that shows and hides a list div below the button when clicked. Is there a wa ...

jquery

Is there a way to use JQuery to determine which button in a table was clicked and retrieve all the data from that specific row?

Below is the HTML code: <table class="table table-stripped table-bordered table-hover centerAll" cellpadding="10"> <thead> <th>Nombre</th> <th>Descripci ...

javascriptjqueryhtmlhtml-tablefrontend

Display the HTML content once the work with AJAX and jQuery has been successfully finished

Below are the codes that I have created to illustrate my question. It's not a complete set of code, just enough to explain my query. The process goes like this: HTML loads -> calls ajax -> gets JSON response -> appends table row with the JSO ...

javascriptjqueryhtmlajax

Executing a .sh script upon loading a webpage

Is there a way to automatically run a .sh file on webpage load to fetch a JSON file using cURL, without making it visible? I need to keep the API key confidential. ...

htmldebian

Using radio buttons and setting the attribute to 'checked' does not function properly in Internet Explorer 7

Is there a way to automatically check radio buttons when appending in IE7? Despite my code working in all browsers, it seems to fail in IE6 and IE7. I can't figure out why it's not working, even though I've followed the correct steps accord ...

jqueryinternet-explorer-7radio-button

Ember's distinctive feature: Named Block Helpers

Can we create "named blocks" in a different way? For instance, {{#customBlock "repeatableBlock"}} {{!-- block containing numerous properties and data that may become messy if hardcoded multiple times --}} {{/customBlock}} Then, elsewhere in the code, {{ ...

javascripthtmlember.jshandlebars.js

Implement a new list field to an object using javascript

I am facing a challenge in converting a JSON object to a list of JSON objects and then adding it back to JSON. Here is an example: config = { existing_value: 'sample' } addToListing = (field, value, index=0) => { config = { ...confi ...

javascriptarraysjsonlist

Creating an interactive map on WordPress: A step-by-step guide

I have successfully created a clickable image on Codepen <div style="width: 1000px; height: 993.73px;"> <img src="https://www.dyfedarchaeology.org.uk/wp/wp-content/uploads/Testmap.svg" alt=&q ...

javascripthtmlcsswordpressclickable-image

What causes my divs to change position when using text <h1>?

When I have multiple divs grouped together inside another div, the placement of my h1 tag shifts downwards. How can I prevent this from happening and ensure that the text is added without any unwanted shifting? This issue only occurs when there are two o ...

htmlcsstextpositioning

Utilizing JavaScript to access and present results from a PHP file located on a separate server

UPDATE I have set the header of my php file as shown below: header("Access-Control-Allow-Origin: *"); Currently, this is the error I am seeing in my browser: "Request header field Access-Control-Allow-Origin is not allowed by Access-Control-Allow-Heade ...

javascriptphpajaxcors

Using jQuery ajax to send a Python response back to the original page

I am looking to implement jQuery ajax along with a simple web form containing two fields to transmit values to a python script. The goal is to have the results displayed within a specified div tag on the same calling page (index.html.en). The process invo ...

jquerypythonajax

Using Angular2, you can dynamically assign values to data-* attributes

In my project, I am looking to create a component that can display different icons based on input. The format required by the icon framework is as follows: <span class="icon icon-generic" data-icon="B"></span> The data-icon="B" attribute sp ...

htmlangulartypescriptangular-cli

Troubleshooting Div Element Width in CSS Not Functioning

When working on a form design, I encountered an issue where the text labels were not aligning to the same width. Despite setting the width, it didn't seem to work as expected: .form-label { display:inline; width: 160px; } <div class="form-label ...

htmlcsswidth

JQuery AJAX requests encountering continual errors

Can you help me troubleshoot an issue with my HTML page? Here is the code I have written: <!DOCTYPE html> <HTML> <HEAD> </HEAD> <form name="form"> <input type="text" id="messageTest" name="msg" value="Your message"/& ...

jquery