有电子邮件表单的背景图片？答案

【问题标题】：Having a background image for email form?有电子邮件表单的背景图片？
【发布时间】：2014-07-11 00:29:13
【问题描述】：

我创建了一个电子邮件表单，并且我有一个图像我想成为整个表单的背景。我尝试过使用 CSS background-image 以及使用 html 来使用背景图片。

我发现的所有教程都只是向我展示了如何将图像作为实际的文本框（即搜索表单内的放大镜）。我希望图像位于整个表单的后面。

我的代码当前生成的内容：http://testing.egfederation.com/contact/contact.php

我的 HTML

<div id = "contentwrap"><div class = "contact">
  <img src="CSS/Bracket.png">
  <form method="post" action="<?php echo $_SERVER["PHP_SELF"];?>">
  <input type ="text" name = "message" placeholder="Full Name"> <br>
  <input type="text" name="from" placeholder="Email Address"><br>
  <input type="text" name="subject" placeholder="Subject"><br>
  <textarea rows="10" cols="35" name="message" placeholder="Please Enter your message here."></textarea><br>
  <input type="submit" name="submit" value="Submit">
  </form></div> </div>

我的 CSS

.contact {

    height:600px;
    width:800px;
    margin-left:auto;
    margin-right:auto;
}
#contentwrap {
    float:right;
}

.contact img{
    z-index:-1;
}

【问题讨论】：

您需要将其设置为分配给类/id的背景图像。

标签： php html css image background

【解决方案1】：

试试这个：

div#contentwrap{
    background-image:url("image URL here");
    background-repeat:; /* if you need it */
    background-size:; /* if you need it */
    }

如果您想了解更多信息，W3Schools 有一些关于 CSS 背景的非常有用的页面。

【讨论】：

我之前试过了，现在好多了，但我仍然无法正确对齐它，无论如何要在图像内部居中表格吗？ testing.egfederation.com/contact/contact.php
@BrendanMcDonald，我可以建议不要使用您的图像，而是使用 CSS 背景颜色属性和边框图像属性吗？这将确保一切都正确对齐，无论窗口高度如何。
@BrendanMcDonald，不过，如果您想使用该图像（因为它看起来确实不错），我建议您将 #contentwrap div 块设置为 800px X 600px。我还将向 .content div 添加填充，并将您的
Contact
放入 .content div

【解决方案2】：

你可以试试

.contact {
    position: relative;
}

.contact form {
position: relative;
    z-index: 2;
}

/* it is better to have a more specific selector */

.contact img.background {
    z-index: 1;
}

【讨论】：

【解决方案3】：

你可以试试：

删除：<img src="CSS/Bracket.png">

css：

.contact {
    margin: 0 auto;
    width:310px;
}
#contentwrap{
    height:600px;
    width:800px;
    padding:60px 0;
    margin: 0 auto;
    background-image:url('http://testing.egfederation.com/contact/CSS/Bracket.png');
    background-repeat:no-repeat;
}

DEMO

【讨论】：

【解决方案4】：

你可以试试

.contact {
    height:600px;
    width:800px;
    margin-left:10px;
    margin-right:10px;
    margin-top:10px;
}
#contentwrap {
    float:right;
    background-image:url("image url");
    background-size: 480px 360px;
    background-repeat: no-repeat;
    z-index:-1;
}

.contact img{
    z-index:-1;
}

JSFIDDLE

【讨论】：

Contact