I was trying to place a form over an image that I wanted to have it as a background in my whole homepage. Everything works fine. The only problem is that I want to place table some pixels lets 50 more to down. Also I would like to place table not to the end of right, but lets say 30 pixels before of it. Any ideas ?
This is my html code:
<html>
<head>
<link href="css/main.css" rel="stylesheet" type="text/css">
</head>
<body>
<div id="text">
<div class="homepageTable" width:40px; margin-right:auto; margin-left:auto; style="text-align:right" >
<form action="#" method="post">
<input type="text" size="25" name="first_name" placeholder="first name"><br/>
<input type="text" size="25" name="last_name" placeholder="last name"><br/>
<input type="text" size="25" name="email" placeholder="email"><br/>
<input type="text" size="25" name="retype_email" placeholder="retype your email"><br/>
<input type="text" size="25" name="password" placeholder="password"><br/>
<input type="text" size="25" name="retype_password2" placeholder="retype your password"><br/><br/>
<input type="checkbox" name="I_accept_terms" value=" "><br/>
<input type="submit" value="" name="submit" style="background:url('img/login_button_1.jpg') no-repeat; width:300; height:50; border:none;"/>
</form>
</div>
</div>
</body>
</html>
and this is my css file:
#text
{
width: 961px;
height:219px;
position: relative;
background-image: url(../img/back_img_green.jpg);
background-repeat: none;
}
Any ideas ?
Thanks Stefanos
Absolutely position the image inside a relatively positioned div. Then absolutely position the form by the offset from top left that you want and give the form a higher z-index. Either that or set the image to be the background of the div.