I was on the social site bebo they have a login box that is rounded with a smaller box inside that where the form is how is it done? www.bebo.com

It's really complicated



as background, overlay the fields.

one layer behind and one on top with the form in side?

not even two layers

the image is the CSS background to the div then there is a table with the form in it

            <form id="login-form" action="/SignIn.jsp" method="post">
            <table width="100%" border="0" cellpadding="0" cellspacing="0">

            <tbody>
                <tr>
                    <td><input type="text" id="username" name="EmailUsername" value="Email or Username" class="field" /></td>
                    <td>
                        <input type="text" id="passwordHolder" name="PasswordHolder" value="Password" class="field" />
                        <input type="password" id="password" name="Password" value="" class="field" style="display:none;" />
                    </td>
                </tr>
                <tr>

                    <td colspan="2" id="remember-field">
                        <input type="image" id="login-button" src="/img/page/login-btn.png" alt="Login" name="SignIn" value="Sign In" />
                        <input type="checkbox" id="RememberMe" name="RememberMe" />
                        <label for="RememberMe">Automagically for 2 weeks</label>
                    </td>
                </tr>
            </tbody>
            </table>

            </form>

Do view source on the page