Skip to main content

Set Transparent Background using CSS in HTML

While developing a WordPress template for one of my friends, he asked to have a business form over a transparent background. Though his sentence framing was not clear, his intention was to show the HTML form over a moving banner with a semitransparent background. If the form simply displays over an image, it will create readability issues. He knows, users will not use the form with readability issues and that is why he wants a semi-transparent background which will not disturb the beauty of moving banner but at the same time make the form readable. This tutorial explains the steps to create a semi (if you want, fully transparent ) background on HTML pages using CSS. Have a look at the form below.


This is a simple business form created using HTML and CSS. All it does is to collect visitors business name, email address, phone number and the real name. Though it is a simple form, some users find it irritating as the background image is a distraction while filling the form. By setting a semi-transparent background in CSS, we can make this form look better. To see the difference have a look at the image below.

Now compare these two forms. The semi-white background doesn't ruin the beauty of the background image and at the same time makes the HTML form looks better.


How to Place a Semi-Transparent background layer behind a Form


The logic is very simple.
  1. Create a DIV which cover the form

  2. Set the background color to the DIV

  3. Set Opacity


Note: While giving background-color, you must use RGB format. If you use HEX color code, the opacity will be applied to the form, not to the background.


<div class="bannerform">

<form>
<input type="text" placeholder="BUSINESS NAME" class="form1"/>

<input type="email" placeholder="EMAIL" class="form2" />
<input type="text" placeholder=" PHONE" class="form1" />
<input type="email" placeholder="NAME" class="form2" />
<input type="submit" value="Submit" class="submitbutton" />

</form>

</div>

In the DIV 'bannerform' we must use the following code.

background: rgba(255, 255, 255, 0.4);

Here I use 0.4 of opacity out of 1. If 1 is used instead of 0.4, you can see a white background.

background: rgba(255, 255, 255, 1);

See what happens if we use opacity 1.


See the difference? The entire DIV background becomes white. Note the point rgba(255, 255, 255) is equivalent to #ffffff which means white color. If you want to set the semi-transparent green color you should use the below code.

background: rgba(0, 255, 0, 0.4);

If it is blue instead of white and green, the RGB code is,
background: rgba(0, 0, 255, 0.4);


Resources

  1. To find the RGB color chart, visit the link below.

    http://www.rapidtables.com/web/color/RGB_Color.htm

  2. Error: Element Style is Missing Required Attribute Scoped

  3. Element div not Allowed As Child of Element Span in this Context


  4. Prevent Malicious User Inputs In PHP Form


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.

Recent Comments