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 display over an image, it will create readability issues. He knows, users will not use the form with readability issues and that is why he want 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 theses 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 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

Recent Posts

How to Configure Idea 4G & 3G on Android Phone -APN Settings

When you activate Idea GPRS, 4G or 3G Internet on your Android phone, your phone will receive the automatic settings. However, sometimes you may need to configure the Access Point and GPRS settings for Idea (both GSM second and third generation) connection manually on your Android phone. In case if you delete the previous configuration, it is better know how to setup the same settings again by yourself. A wrong Access Point Name can stop you from accessing their mobile broadband service. Otherwise after deleting the existing APN for Idea 3G or GPRS you may need to re-insert the SIM again to get automatic settings from them. If you know the manual configuration steps, you can avoid that hardware procedure. If you are looking for the steps to get maximum speed from Idea 4G, you may click the link below and follow the instructions. The below hack will increase the Idea 4G data transfer speed.


Boost Idea 4G Data Transfer Speed

Steps to Configure Idea 4G/ GPRS/ 3G on Android Click on Applic…

Village Field Assistant in Kerala Revenue (123/2017) Examination

PSC has notified examination for the post Village Field Assistant in Kerala Revenue Department. Category number of the notification is 123/2017. According to this notification, anyone who has passed 10th Standard and having cycling skill can apply. There is no ineligibility for those having higher education standards to apply for Village Field Assistant. So, those who passed HSS, Degree etc can apply. Village Field Assistant is the new name given to the post Village Man in Kerala Revenue Department and is one of the few posts where PSC conducts direct recruitment to Revenue department. Public Service Commission conducts different examinations for each districts and there will be different question papers and cut off marks. Anyone who apply for Village Field Assistant can apply to only one district. Right now, only anticipatory vacancies are reported. So we do not know the exact number of vacancies in each districts. According to High Court verdict in 2006, women too can apply to Vill…

Eligibility and Exam Pattern CBI Officer Recruitment 2017 - Sub Inspector By SSC CGL

To become an officer in Central Bureau of Investigation ( CBI ) is a dream of many youth in India. Though this elite investigation agency is popular among public, many do not know the procedure to join CBI as an officer. This article explains the various criteria, eligibility, exam pattern and procedure to become a CBI officer. Two different agencies conduct examinations to fill vacancies in CBI. They are UPSC and SSC. To become a group A officer in CBI, you must choose Civil Service Examination conducted by UPSC and become an IPS officer. To join as Sub Inspector in CBI, you must go through SSC CGL examination.

Name Of the Post Recruitment Agency Group A OfficerUPSC (Civil Service Examination)Sub InspectorSSC CGL
Where to Apply
If you are dreaming to become an Officer in CBI, you must pass the Combined Graduate Level Examination (CGL ) conducted by Staff Selection Commission (SSC) in every year. You must wait for the next SSC CGL notification and prepare for the same. It is a 4 tier …

PING: Transmit failed. General Failure - Reasons and Solution

Yesterday while checking network connectivity, I received one error message while trying to ping loopback address from my Windows computer. The error message I received is "PING: Transmit failed. General Failure" and all the packets send from command prompt were lost. I tried to ping a different loopback address but the result was same. I fixed the issue by following a set of steps and sharing those troubleshooting steps in this tutorial hoping it may help in case if you experience the same error message PING: Transmit failed. General Failure.


Broadband Hack To Improve Speed

This is the output I received when I ping loopback address.

C:\Users\sijugk>ping 172.0.0.21 Pinging 172.0.0.21 with 32 bytes of data: PING: transmit failed. General failure. PING: transmit failed. General failure. PING: transmit failed. General failure. PING: transmit failed. General failure. Ping statistics for 172.0.0.21: Packets: Sent = 4, Received = 0, Lost = 4 (100% loss)


Reasons an…

Modify SBI Inter-Bank Beneficiary For RTGS & NEFT

To complete online money transfer using either RTGS or NEFT in your State Bank of India net banking account, the first step is to add the account details of the person to whom you are sending money. Once the details are added under Inter-Bank Beneficiary list, you can start sending money to his/her account. However, it is possible that you might have entered wrong details while adding the beneficiary details. SBI allows users to either modify or delete a beneficiary if the user find the details incorrect. This article explains how to modify or delete beneficiary on SBI account within few minutes. The same procedure can be followed if you are seeing you have reached the maximum number of beneficiaries in your account while adding a new one.

Step By Step Instructions To Delete Beneficiary in HDFC Bank

Steps to Add a Beneficiary in State Bank Net-banking Account

Visit the SBI Netbanking login Link and enter netbank username and password.

https://retail.onlinesbi.com/retail/logi…

DSSSB Recruitment 2017 - LDC, Field Assistant, Librarian, Statistical Assistant, Junior Engineer

DSSSB has invited applications various posts in National Capital Territory of Delhi State Government Service. DSSSB ( Delhi Subordinate Services Selection Board ) is the recruitment agency to fill reported vacancies in Delhi State Government. Latest DSSSB notification invites applications from eligible candidates to various posts under Government of NCT of Delhi and its autonomous bodies. Vacancies are reported in LD Clerk, Grade 4 (DASS) Grade 2(DASS), Statistical Assistant, Junior Engineer, Draughtsman Grade-III, Field Assistant, Food Safety Officer, Librarian and Librarian Trainee. This article explains minimum eligibility to apply for DSSSB recruitment, Pay scale of various posts, age limit to apply, examination fee, mode of application etc. This tutorial also provides study materials based on previous years DSSSB question papers and latest syllabus based model questions. Important details in DSSSB 2017 Recruitment notification is given below.
Date of NotificationLast Date to Apply…