How do I set image behind the text using css?

I am trying to auto center text from top to bottom and from left to right, in other words text needs to be in a center of the image. The only thing i can change is css, the cod开发者_JAVA百科e tags are hard coded, so it can't be changed.

<style>
code {
background:url(http://pad1.whstatic.com/skins/WikiHow/images/header.png) no-repeat -220px 0;
width:403px;
height:56px;
line-height:1.1em;
text-align:center;
padding-top:56px;
padding-left:60px;
padding-right:40px;
}
</style>

<code>message goes here</code>

You need to set the display to block for the <code>, which is an inline element, so that width and height apply, and better do it the automatic centering way instead of hardcoding any padding sizes:

Sample in http://jsfiddle.net/bx852/7/

<style>
code {
background:url(http://pad1.whstatic.com/skins/WikiHow/images/header.png) no-repeat -220px 0;
width: 310px;
height: 66px;
line-height: 66px;
text-align: center;
display: block;
}

.notice { font-size: 50px }
</style>

<code>message goes here</code>
<code class='notice'>hi joe</code>

result:

If you know the dimensions of the image make the width the width of the image, align the text to center, make the height half the image and set the top padding to half as well. Should do the trick

code {
  background:url("images/bkg.png");
  width: 400px;
  height: 200px;
  text-aling: center;
  padding-top: 200px;
}

To horizontally and vertically center text, I would set text-align: center to horizontally align. Then, I would set line-height in pixels until it vertically aligns center. Usually, this is double the font size, but it would depend on your padding and height set.

try this instead,

code {
background-image:url('images/header.png');
width: 310px;
height: 66px;
text-align: center;
}

hope you get your answer..

i can try this too,

<form action="put url here" method="get"><input type="submit" style="background-image: url(filename.gif); color: #0000cd; font-weight: bold; font-size: 13pt;"></form>