CODEWITHSUNDEEP
htmlcss
Naz
Naz

Reputation: 910

Make button the size of background image

I have a form with a submit button that has a background image, 

<button type="button" class="button" alt="Send" onclick="validate_form_newsletter_wide( form )"></button>

It's fine so long as I specify the dimensions to use in the CSS.

.button {
  position: relative;
  background: url("index_htm_files/btn_newsletter_wide.png") no-repeat;
  border:none;
  cursor: pointer;
  float: right;
  height: 51px;
  width: 200px;
  margin: 0px;
  padding:0px;
  z-index: 999;
}

If I remove the height and width CSS the button doesn't show and if I set them to 100% each then I see a slither of the button just beneath the form.

How can I change the CSS or the code so that I don't need to specify the size of the image, because the size of the image will change from time to time by a bit.

Upvotes: 0

Views: 483

Answers (1)

Quentin
Quentin

Reputation: 943214

You can't make an element scale to fit its background image.

That said, you don't have any content on your button at all, so it sounds like your background image is actually a content image and shouldn't be in the CSS at all.

Use a content image instead.

<button type="button" 
        class="button" 
        onclick="validate_form_newsletter_wide( form )"><img
            src="index_htm_files/btn_newsletter_wide.png" 
            alt="Send"></button>

You might want to remove default padding and borders of the button with CSS, and adjust the vertical-align of the image so that it sits on the line where you want it.

Upvotes: 2

Related Questions