有一个背景图像的电子邮件表单 - Having a background image for email form?

Having a background image for email form?

我创建了一个电子邮件表单，我有一个图像，我想成为整个表单的背景。我试过使用CSS背景图像以及使用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;
}

试试这个:

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

如果你想要更多的信息，W3Schools有一些非常有用的CSS背景页面

你可以试试

.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;
}

您可以尝试:

remove: <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;
}

你可以试试

.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