在div形式后面粘贴背景

时间:2017-08-10 14:03:19

标签: html css

我有一个表单,我正在寻找一个图像,就像在这个例子中一样:

Effect I'm trying to accomplish

代码如下:

#minicontact{width:25%;float:right;margin:-525px 155px -5px 0;}
#miniformtitle{margin:0 auto; text-align:center;}
#buttonmini{cursor:pointer;width:150px !important;height:60px !important;font-size:120% !important;text-align:center !important;background-color:#6db9fa !important;color:#ffffff !important;border-radius:20px !important; margin-top:20px; display:block; padding:0px;
margin:0 auto;}
<div id="minicontact">
  <h3 id="miniformtitle">Get Started</h3>
  <form class="contact" action="&lt;?=$_SERVER['REQUEST_URI'];?&gt;#cform1" method="post" name="simp_cont">
    <p><br /> <input id="captcha" class="input" style="position: absolute; left: -9999px;" name="captcha" type="text" /><br /> <input id="name" name="fname" type="text" placeholder="NAME" /><br /> <input id="phone" name="phone" type="text" placeholder="PHONE NUMBER"
      /><br /> <input id="email" name="email" type="text" placeholder="EMAIL ADDRESS" /><br /> <input id="footage" name="footage" type="text" placeholder="ESTIMATED SQUARE FOOTAGE" /><br /> <textarea class="textarea" name="message" placeholder="COMMENTS"></textarea><input name="form_name" type="hidden" value="contact_form" />
    	<button type="submit" id="buttonmini" name='submit'>SEND MESSAGE</button></p>
  </form>
</div>

我想用作背景的图片是:

Background image

2 个答案:

答案 0 :(得分:2)

Google可能不会允许您在运行脚本中看到图像,但CSS可以帮助您实现它:)

#minicontact {
  width:400px;
  height:500px;
  float:left;
  border:1px solid #ebebeb;
  background:url('https://cdn.pixabay.com/photo/2016/10/27/22/53/heart-1776746_1280.jpg');
  background-size:cover;
  background-position:center;
}
<div id="minicontact">
  <h3 id="miniformtitle">Get Started</h3>
  <form class="contact" action="&lt;?=$_SERVER['REQUEST_URI'];?&gt;#cform1" method="post" name="simp_cont">
    <p><br /> <input id="captcha" class="input" style="position: absolute; left: -9999px;" name="captcha" type="text" /><br /> <input id="name" name="fname" type="text" placeholder="NAME" /><br /> <input id="phone" name="phone" type="text" placeholder="PHONE NUMBER"
      /><br /> <input id="email" name="email" type="text" placeholder="EMAIL ADDRESS" /><br /> <input id="footage" name="footage" type="text" placeholder="ESTIMATED SQUARE FOOTAGE" /><br /> <textarea class="textarea" name="message" placeholder="COMMENTS"></textarea><input name="form_name" type="hidden" value="contact_form" />
    	<button type="submit" id="buttonmini" name='submit'>SEND MESSAGE</button></p>
  </form>
</div>

答案 1 :(得分:0)

只需通过css设置背景图片,就可以了。

https://developer.mozilla.org/en-US/docs/Web/CSS/background-image