Skip to main content

Display Form Over an Image set as background

While designing a website contact page, creative designers put an effort in eye catchy form design to encourage more user responses. One of the successful styles is to place a contact form over an eye catchy image. There are different methods to place the form over the image. The simplest method is to set the image as a background image. However, in this scenario it cannot work as this form should be placed over a sliding banner. Anyway, I will explain both methods (set banner as background and moving banner) in this tutorial.

  1. Display Form Over an Image set as background

    This is very simple. All we have to do is to set the image as the background image of the div. Then place the form in the div.


    Have a look at a simple form which displays over a background image.


    Now let us check the HTML code.

    HTML Part

    <div class="bannerform">

    <form>
    <input type="text" placeholder="BUSINESS NAME" class="form1"/>
    <input type="text" placeholder=" WEBSITE" class="form1" />
    <input type="email" placeholder="EMAIL" class="form1" />
    <input type="submit" value="Submit" class="submitbutton" />

    </form>

    </div>

    Now we need to check the CSS part to analyze the classes bannerform, form1, submitbutton, etc. However, only the bannerform class comes under the scope of this tutorial.


    .bannerform {
    width: 100%;
    height: 380px;
    backgorund-image

    background-image:url(http://2.bp.blogspot.com/-CXoNXRxBZ8s/T971V7vVu2I/AAAAAAAAANM/IDyr_p5WeiU/s1600/ponmudi-trip.jpg)

    }


    It is the simplest method to place HTML form over an image. However, it doesn't work when you want to display HTML form over a moving banner. For that, you should follow the second method.



Comments

About Author

My photo
Alex George
Alex George has Engineering graduation in Computer Science and an MBA in Finance. He had been working as a senior Network Engineer for ten years. His specialization is in Cisco products. Traveling is one of his hobbies and visited various places as part of his onsite work. He visited different places as part of his onsite work like New York, Dubai, London, etc. Right now Alex is a director of one of the leading career development firms in India, which trains students for UPSC, SSC, and PSC examinations. He guides a lot of students to get selection for various prestigious institutions like CBI, Income Tax Department, etc. Alex George is a stock market investor and a very active intraday trader. Engineering Background: He has a B.Tech in Computer Science and Engineering and passed different network and security courses like CCNA, CCNP (Security), CEH, and various Microsoft certifications. Finance Background: Alex has an MBA in Finance. He is an active intraday trader and a Share Market Investor. Webmaster Skills: Alex is a blogger since 2004. He has a working knowledge of HTML, CSS, PHP, and JavaScrip.