Text over the image/button

Question

How to make text over the image/button using html/css.

Eg: I have a button(Login Button). I want the text \"Login\" to be placed over that button. The text should be cen

Answer 1

You can simply set the background-image property of the relevant button (or other element if you are using in place of a button).

Note that you can control height/vertical centering of the text using line-height, however, if the text is multi-line this may have other issues, so you may wish to resort to using padding, or a sub element with top:50%;tranform:translateY(-50%);

If using a semantically valid button element, text is center aligned by default, otherwise simply set text-align:center

button {
  line-height: 50px;
  width: 300px;
}
button.imgButton {
  color: white;
  background-image: url(http://abdpbt.com/tech/wp-content/uploads/2009/09/gradient.jpg);
  background-size:cover; /* <-- scale the image to cover the button */
  background-position:center center; /* <-- center the image in the button */
}

Normal Button

Image Button