CODEWITHSUNDEEP
htmlcss
El Retardo
El Retardo

Reputation: 21

CSS button image resizing

I have a button with an image on it, though image is stretching to fit inside the button. I want to stop it from doing so and center the image vertically and horizontally but can't find a way to do so since the image is added to the button using the src attribute. 

    <div id="form">
        <input type="text"  value="Name">
        <input type="text"  value="Email">
        <textarea rows="7">Message</textarea>
        <input id="button" type="image" src="Images/send_icon.png">     
    </div>

Upvotes: 1

Views: 16111

Answers (3)

Marijn van Vliet
Marijn van Vliet

Reputation: 5399

If you really can't change the HTML, you can try adding padding to the <input>:

<style>
    #button {
        /* ugly green background color, but it serves to show the area of 
           the button */
        background-color: green;
        
        /* Setting the size of the button. Set only the width or the
           height, to prevent stretching the image */
        width: 300px;
            
        /* By adding padding, we can change the position of the image 
           inside the button */
        padding-top: 70px;
        padding-bottom: 80px;
        padding-left: 50px;
        padding-right: 50px;
    }
</style>
<input id="button" type="image" src="http://cdn.sstatic.net/stackexchange/img/logos/so/so-logo.png?v=71aa9dd4a5bb" />

But really, changing the HTML to get rid of the type="image" part is a better solution overall. See the other excellent answers.

Upvotes: 0

tomtomtom
tomtomtom

Reputation: 899

You must stylise your button or input with CSS :

input#button{
  background-image : url(Images/send_icon.png);
  background-position: center center;
  background-repeat: no-repeat;
}

And remove the type='image' of your html.

Upvotes: 1

Shailesh Katarmal
Shailesh Katarmal

Reputation: 2785

Use background size property it may be solve your problem.

background:url('imagepath') center no-repeat; background-size: 100% 100%;

Upvotes: 3

Related Questions