HTML- How do we set opacity to background/translucent in CSS without affecting the inner content?

Problem

This is a common area HTML developers do mistake. For example client will ask to give opacity to background. Here client expectation may be something similar to iphone’s translucent effect. But the developer will give opacity to the outer container, which will affect all it sub containers too. If the opacity value is high (above 0.7) this not is so visible and client will be OK. But if client require more, then content will not be readable. So finally either we will force to not use this or to have higher opacity value. Or else we need to use background image.

I will explain the same with few images

So, your designer gives you following design

You can see the transparency of login form block. Also, we want to implement the same in the various device, like responsive screens.

So our obvious choices is to provide opacity to form block as below

But the out will be like below,

Figure 1: with Opacity 7

You can see the difference, form is not clear and content is not properly rendered as expected.

This will become more worse if decrease opacity to much low. See, the response with opacity as 0.5

Here form is really useless. But we are getting expected back ground.

Solution

There is many ways to achieve this. I would like to share pure CSS solution.

Image that your code is as below

I am not going to detail as it will be boring,

Step1: Update the code as below

 Step2: Now set the background colour to form-background class and add proper height and width;

Step3: Also make sure that formContainer is set with position: relative

Step4: Set the form with position absolute and set a top/left values

Step5: Give opacity to form-background alone.

Step5:  You are done, save and refresh the page for the magic.

So the out will be as below,

I am sharing the sample css

Hope this will help.

Thanks for reading.

  • http://subin.me/ Subin George

    Hi All,

    Please let me know if you need any help in doing this

    • shanthi

      very very useful subin. i am shanthi thank u very much

      • http://subin.me/ Subin George

        Thanks Shanthi, please keep reading..

  • Teodor Sandu

    I wonder why in 2014 people still promote ugly hacks like this. Please read about rgba() and enlighten yourself. As a hint, the css for the form container would look like this: background-color: rgba(255, 255, 255, 0.3); this makes for a nice transparent background while its contents remain at normal opacity. Same thing goes for borders if you need it. Please start making the web better, not worse.

    • http://subin.me/ Subin George

      Thanks for your valuable comment.

      I am sorry the delayed reply. I am aware about rga, but I wrote this because we need to work with older browsers too even now, due to client requests.

      I totally I agree on you point, that this make HTML more ugly.

      Also I will add rga transparency code to this artcle.

      Thanks for reading.

      • Teodor Sandu

        Sorry for sounding a bit offensive. I realize you have to make a living, but i would rather decline clients that require support for old browsers. It’s not helping anyone if we encourage/support people to use old, buggy and ultimately unsafe software due to the increasing number of security vulnerabilities that are being discovered over time. It’s just my view that we as developers should try to push our clients into adopting newer and better/safer technology, which is ultimately better for the end consumers, as well as more pleasurable for us to develop, and faster, thus cheaper for our clients. I usually don’t refuse, but charge a lot extra for backwards compatibility, simply because of the inherent complications. Cheers :)