How to Add Background Image for Input Type="Button"

How to add background image for input type= button ?

You need to type it without the word image.

background: url('/image/btn.png') no-repeat;

Tested both ways and this one works.

Example:

<html>
    <head>
        <style type="text/css">
            .button{
                background: url(/image/btn.png) no-repeat;
                cursor:pointer;
                border: none;
            }
        </style>
    </head>
    <body>
        <input type="button" name="button" value="Search" onclick="showUser()" class="button"/>
        <input type="image" name="button" value="Search" onclick="showUser()" class="button"/>
        <input type="submit" name="button" value="Search" onclick="showUser()" class="button"/>
    </body>
</html>

button background image

Astonishing that no answer addresses or mentions the actual problem here.

The CSS selector button #rock says "give me an element with the id rock inside a <button> element", like this:

<button>
    <span id="rock">This element is going to be affected.</span>
</button>

But what you wanted is a <button> element with the id rock. And the selector for that would be button#rock (note the missing space between button and #rock).

And as @Greg already mentioned: #rock is already specific enough to target the button and could be used on its own.

HTML / CSS How to add image icon to input type= button ?

If you absolutely must use input, try this:

background-image: url(...);
background-repeat: no-repeat;
background-position: <left|right>;
padding-<left|right>: <width of image>px;

It's usually a little easier to use a button with an img inside:

<button type="submit"><img> Text</button>

However the browser implementations of button for submitting are inconsistent, as well as the fact that all button values are sent when button is used - which kills the "what button clicked" detection in a multi-submit form.

Setting a background image with a button in HTML/CSS

You can't do that without JavaScript

Unfortunately CSS styles can only be applied to the selected elements and their children, neighbors, and siblings. Since the body is a parent of your button, setting styles on the button itself has no effect on it. You have to give your button an event handler that sets the background of the body tag. The easiest way to do it would be

<button onclick="changeBackground();">Click me</button>

Then create the function that will handle the click

<script type="text/javascript">

    function changeBackground() {
        document.body.style.background = 'url(meme.jpg) no-repeat';
    }

</script>

Of course this is just the tip of the iceberg if you've yet to use JavaScript, there's a lot of material about it on the web.

Text AND background-image on input[type='submit']

CSS

input {
background-color: #D28888;
background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#690707), to(#D28888));
background: -moz-linear-gradient(top, #690707 0%, #D28888 100%);
    border:none; padding:6px 12px; color:#fff; cursor:pointer
}

DEMO

By using background-image

input {
background-image: url(http://alanbooth.net/alap/images/gradient.bmp);
border:none;
padding:6px 12px;
color:#fff;
cursor:pointer
}

DEMO - 2

Adding background image to button

You are targeting the html in your jquery $(this).html you have to target the correct attribute. I.e. the css of the button: $(this).css

var toggled = false;
$("button").click(function() {
    if (!toggled) {
        $(this).css( "background", "url(http://i.imgur.com/Q2sj6XQ.png)" );
        toggled = true;
    } else {
        $(this).css("background", "url(http://i.imgur.com/GKVoeGr.png)");
        toggled = false;
    }

    $("p").slideToggle();
})

Check out fiddle for example: https://jsfiddle.net/krvct8Lg/

Edit:
I added some further readings for you: http://api.jquery.com/html/ and http://api.jquery.com/css/

Changing div background image by clicking on specific button

The problem is that you are testing x.click, y.click, etc. which is not actually testing to see which button got clicked, but instead is testing to see if each element has a click method, which they all do, but because the first one you test is x.click and that test returns true, that's the one that runs all the time.

The code can be simplified quite a bit with no if/then needed at all. And, all you'd have to do to add more choices is just add another button and add the new image path into the array.

See the comments inline below:

// Instead of setting up 4 separate event handlers that all point to the 

// same callback function, we can use event delegation where we handle the

// event on an ancestor object of all the elements we care about

document.querySelector(".buttonContainer").addEventListener("click", photo);

// Store all the images in an array

var backgrounds = [

"https://upload.wikimedia.org/wikipedia/commons/thumb/e/e0/SNice.svg/220px-SNice.svg.png",

"https://upload.wikimedia.org/wikipedia/commons/thumb/5/51/Mr._Smiley_Face.svg/2000px-Mr._Smiley_Face.svg.png", 

"https://www.qualitylogoproducts.com/stress-balls/smileyface-squeezie-superextralarge-480745.jpg",

"https://cmkt-image-prd.global.ssl.fastly.net/0.1.0/ps/3647668/1160/1160/m1/fpnw/wm1/10837-royalty-free-rf-clipart-illustration-black-and-white-smiley-face-cartoon-character-vector-illustration-isolated-on-white-background-.jpg?1511798933&s=2e423029fc4d833fde26d36d8a064124"

];

// Get a reference to the output element

var picHolder = document.getElementById("photodiv");

// All event handling functions are automatically passed an argument

// that is a reference to the event object itself

function photo(event){

   // Just set the background image based on the index of the button

   // that got clicked within its parent and the corresponding index

   // of the image in the array

   

   // Get all the <input> elements

   var buttons = document.querySelectorAll(".buttonContainer > input");

   

   // Convert that node list into an array and get the index of the 

   // one that got clicked (event.target is the one that got clicked)

   var index = (Array.prototype.slice.call(buttons)).indexOf(event.target);

   // Set the background to the right image from the array

   picHolder.style.backgroundImage = "url(" + backgrounds[index] + ")";

}

#photodiv { width:100px; height:100px; border:1px solid grey; background-size:cover;  }

<!-- id's are not needed but wrapping all the buttons in a common ancestor will help -->

<div class="buttonContainer">

  <input type="button" value="1">

  <input type="button" value="2">

  <input type="button" value="3">

  <input type="button" value="4">

</div>

<div id="photodiv"></div>

How to change an input button image using CSS

If you're wanting to style the button using CSS, make it a type="submit" button instead of type="image". type="image" expects a SRC, which you can't set in CSS.

Note that Safari won't let you style any button in the manner you're looking for. If you need Safari support, you'll need to place an image and have an onclick function that submits the form.

How to Add Background Image for Input Type="Button"