如何将我的背景图像置于TD中心?

时间:2014-05-22 13:08:08

标签: html background-image html-table center

这是我到目前为止所拥有的。我创建了一个样式表,但我无法通过它显示它。

<td width="40%" background="images/form2.png" background-size="40%" repeat="no-repeat no-repeat" attachment="fixed" alignment="center" alt="">
    <div class="callform">CALL NOW!<br>
        1-877-670-9168<BR>or<BR>Let Us Call You
    </div>
    <div class="form2">Simply fill out the form below and one of our experts will call you.</div>
 </td>  
  <table>
      <tr>
         <td><div class="form">First name:</div></td>
         <td><input type="text" size="50%" name="firstname"></td></tr>
      <tr>
         <td>Last name: </td>
         <td><input type="text" size="50%" name="firstname"></td></tr>     
      <tr>
         <td>Phone: </td>
         <td><input type="text" size="50%" name="firstname"></td></tr>
      <tr>
         <td>Zip Code:</td>
         <td><input type="text" size="50%" name="firstname"></td></tr>
  </table>
  <div class="submit"><input type="submit" value="Submit"><br>

1 个答案:

答案 0 :(得分:0)

这样做的一种方法是使用CSS 你可以找到更多:

  

http://www.w3schools.com/css/css_positioning.asp

首先代码很糟糕...... 我建议您暂时不要在div内使用td

JSFiddle:http://jsfiddle.net/gxQTs/3/ 请注意,html代码仍然不合适!!

HTML:

    <div class="main">
    <img src="http://www.brendabaran.com/wp-content/uploads/2013/01/Contact_Us.jpg">
        <div class="info">
        CALL NOW!
        1-877-670-9168<BR>or<BR>
        Let Us Call You
        </div>
Simply fill out the form below and<BR>one of our experts will call you.
  <div class="form">
     <form>
First name: <input type="text" size="50%" name="firstname"><br>
Last name: <input type="text" size="50%" name="firstname"><br>
Phone: <input type="text" size="50%" name="firstname"><br>
Zip Code: <input type="text" size="50%" name="firstname"><br>
        <div class="submit" style="text-align:center;"> 
           <input type="submit" value="Submit"> 
        </div>
    </form>
  </div>
</div>

CSS:

img
{
resize: both;
width: 250px;
position: absolute;
left: 85px;
top: 0px;
z-index: -1;
}

如您所见,您可以通过&#34; left&#34;移动图像。属性z-index:-1也将图像设置为与表单重叠。