棒股利形式後面的背景

Question

我有一個表格，我希望後面放置一個圖像，就像這個例子：

的代碼如下：

#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" /> 
 
    \t <button type="submit" id="buttonmini" name='submit'>SEND MESSAGE</button></p> 
 
    </form> 
 
</div>

我想作爲背景使用的圖片是：

Answer 1

谷歌可能不會讓你看到在運行腳本的形象，但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" /> 
 
    \t <button type="submit" id="buttonmini" name='submit'>SEND MESSAGE</button></p> 
 
    </form> 
 
</div>

Answer 2

只需通過CSS設置一個背景圖像，你很好去。

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