Question

我创建了一个电子邮件表单，我有一个图像，我希望成为整个表单的背景。我已经尝试使用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;
}

Answer 1

试试这个：

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

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

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

Answer 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

Answer 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

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

4 个答案: