Skip to main content


Showing posts from August, 2017

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.

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.


<div class="bannerform">

<input type="text" placeholder="BUSINESS NAME" class="form1"/>
<input type="text&quo…