Add background image for HTML button

 The default value of the HTML button button is that there is no background image. The appearance of the button itself in different browsers is slightly different, but it is similar. Web designers can usually improve it by adding a background image to the HTML button button . The visual effect of the button itself and increase the overall beauty and integrity of the web page. How to add a background image to the HTML button ? Here we will use the CSS background-image property to design, which is a standard property for designing the background image of web page elements. Let's take a look at the grammar rules first, and then apply examples to readers to see the effect.

CSS background-image property syntax

background-image:url (the URL of the background image to be used);

The background-image property of CSS can add background images to web page elements through url, of course, you can also add background images of buttons. It should be noted that in order to match the size of the button itself, the image size and button size should be set to the same. In this way, the background image of the button will be more beautiful.

For detailed usage of background image properties, please refer to the complete content of " CSS background-image background image ".

A practical example of adding a background image for HTML button

<input type="button" style="width:150px;height:40px; background-image:url('image URL'); "value="button with background image">

Visual effects of the example

The example is a button with a background image. The size of the background image we use is 150px wide and 40px high. In order to make this background image fully match the button size, we also adjust the size of the button to the same (width: 150px ;height:40px;), insert the pre-prepared image as the button background image through the background-image property. This is done. It is quite easy. The same technique can also be applied to the design of the form submit button.