Changing proportions of an image of a “Submit” button

HTML & CSS
1

Hi everyone,
My code contains a form and an input of “submit” type.
I want my submit button to be an image so I wrote the next html/css code:

.button 
{
background: url("pics/edit.gif") no-repeat scroll 0 0 transparent;
background-size: auto;
}

<input type = 'submit' value='' class = 'button'>

Unfortunately the image turns out to be too big to fit in line with other elements.
I’d like to change the image’s size proportionately (the entire image ! Not only a part of it !)
to be of 20px width 20px height.
Can anyone show me the way to do it eithe in HTML or CSS ?
Thank

2

How big is your original image? Wouldn’t it be easier to just reduce the size of that image before you upload it? Have you tried changing your background-size: auto; to reflect a specific size?

2 Likes
3

Removing the text from the value attribute is bad practice because screen readers won’t know what that button does?

You would be better off using a button element with type of submit and placing the image in the html.

There are ways of hiding the text in an input type=submit but gets complicated for older browsers.

If you do go with your original code then size the button to match the size you have made the image but remember to remove all styling from the input button (borders, padding, background Colors, appearance etc)

4 Likes
4

Thank you so much PaulOB,
I did write a description to the submit button which went this way:
CSS

.tooltiptext 
	{
		visibility: hidden;
		width: 70px;
		background-color: #FFF8DC;
		border: 1px solid #cbcbcb;
		border-radius: 6px;
		text-align: center;
		/*padding: 1px 10px 0;*/
		margin: -10px -60px;

		/* Position the tooltip 
		position: absolute;*/
		position: inline-block;
		z-index: 1;
	}
	.edit:hover .tooltiptext 
	{
		visibility: visible;
	}

HTML

<td class = 'edit'>
<a href='update5.php?edit_mkt=".$row['id']."&edit_name=".$row['name']."'>
<img src='pics/edit.gif' height='20px' width='20px'>
</a>
<span class='tooltiptext'>Edit</span>
</td>

But I bumped into a trouble of losing $_GET global so I changed to “Submit” where I lost my image.
I’ll follow your advice to change to “Button” before I lose my mind :slight_smile:

5

Something like this:

1 Like
6

Thanks a lot PaulOB

1 Like
7

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.