백그라운드 이미지와 로그인테이블 위치가 바뀌는문제
본문
백그라운드 이미지위에 로그인테이블위치가 해상도마다 바뀌더라구요
백그라운드이미지 위에 정확한 위치에 로그인 테이블이 오도록 하려고 하는데
어떻게 해야될까요??
<?
include_once("./_common.php");
//추천코드가 있는지 확인하고 없으면 가입할 수 없습니다.
if( $config[cf_code_time] )
{
if( $regcode != "")
{
//$time = $config[cf_code_time]/24;
$t1 = $config[cf_code_time] * 3600;
//$sql = "select *, count(*) as cnt from $g4[code_table] where co_send ='$regcode' and now() <= date_add(co_send_datetime,interval $time day) ";
$sql = "select *, count(co_id) as cnt from $g4[code_table] where co_send ='$regcode'";
$result = sql_fetch($sql);
if($config[cf_code_time] && strtotime($result[co_send_datetime]) + $t1 < $g4[server_time])
alert("유효기간이 지난 추천코드 입니다.", "/login.php");
//싱글코드 사용옵션이 있으면 주문수를 확인한다
if( $result[cnt] > 1 && $config[cf_code_single] )
alert("이미 사용된 추천코드 입니다.");
if( $result[co_send] == $regcode )
goto_url("$g4[bbs_path]/register_form.php?regcode=$regcode");
}
}
?>
<div style="margin:0 auto;width:1300px;">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=euc-kr" />
<title>홈페이지</title>
<script language="javascript">
// 자바스크립트에서 사용하는 전역변수 선언
var g4_path = "<?=$g4['path']?>";
var g4_bbs = "<?=$g4['bbs']?>";
var g4_bbs_img = "<?=$g4['bbs_img']?>";
var g4_url = "<?=$g4['url']?>";
var g4_is_member = "<?=$is_member?>";
var g4_is_admin = "<?=$is_admin?>";
var g4_bo_table = "<?=isset($bo_table)?$bo_table:'';?>";
var g4_sca = "<?=isset($sca)?$sca:'';?>";
var g4_charset = "<?=$g4['charset']?>";
var g4_cookie_domain = "<?=$g4['cookie_domain']?>";
var g4_is_gecko = navigator.userAgent.toLowerCase().indexOf("gecko") != -1;
var g4_is_ie = navigator.userAgent.toLowerCase().indexOf("msie") != -1;
</script>
<style type="text/css">
<!--
body {
background-position:center top;
background-image: url(login_image/BG_Highlight_noTrans.jpg);
background-repeat:no-repeat;
margin-left: 0px;
margin-top: 0px;
margin-right: 0px;
margin-bottom: 0px;
padding-top: 670px;
background-size:cover;
}
-->
</style>
</table>
</form>
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td height="960" style="text-align:center;" style="padding-bottom:20px; padding-top:25px;"><table width="347" border="0" cellspacing="0" cellpadding="0">
<tr>
<td width="center" height="center" style="text-align:center;" style="padding-top:10px; padding-bottom:5px;"><img src="login_image/logo.png"></td>
</tr>
<tr>
<td style="text-align:center;" style="font-size:11px; color:#C8C6C2; font-family:gulim; line-height:13px; padding-top:10px;"> </td>
</tr>
</table></td>
</tr>
<tr>
<td align="left" style="padding-top:20px; padding-bottom:20px; font-family:gulim; color:#FFFFFF; font-size:12px;"><font color="#000000" style="padding-right:200px; padding-left:100px;">
</tr>
</tr>
</table>
<table width="0" border="0" cellspacing="0" cellpadding="0">
<tr>
<td style="text-align:center;" valign="bottom" style="padding-top:6px; padding-bottom:6px;"><table width="0" border="0" cellspacing="0" cellpadding="0">
<tr>
<td width="200" ><table width="360" border="0" cellspacing="0" cellpadding="0">
<tr>
</table>
</td>
<td width="491" align="right" style="padding-right:15px;">
<form name="fhead" method="post" action="index.php" onSubmit="return fhead_submit(this);" autocomplete="off" >
<table border="0" align="right" cellpadding="0" cellspacing="0" >
<tr>
<td valign="middle"><table width="25" border="0" cellspacing="0" cellpadding="0">
<tr>
<td style="text-align:center;"><font color="#dddddd" style="font-size:11px; font-weight:bold;"></font></td>
</tr>
</table>
</td>
<td valign="middle" style="padding-right:5px;"><INPUT style="width:150px;height:20px; border:1px solid #eeeeee; background:#ffffff; color:#000000;" onFocus="this.className='txt2'" onfocusout="this.className='txt'" name="mb_id" type="text" id="id" autocomplete="off"></td>
<td valign="middle"><table width="30" border="0" cellspacing="0" cellpadding="0">
<tr>
<td style="text-align:center;"><font color="#dddddd" style="font-size:11px; font-weight:bold;"></font></td>
</tr>
</table>
</td>
<td valign="middle"><input style="width:150px;height:20px; border:1px solid #eeeeee; background:#ffffff; color:#000000;" onFocus="this.className='txt2'" onfocusout="this.className='txt'" name="mb_password" type="password" id="id2" autocomplete="off"></td>
<td valign="middle" style="padding-left:3px; padding-right:5px;"><input type="image" src="login_image/bt1.png"/></td>
<td valign="middle"><a href="./bbs/register_form_join.php"><img src="login_image/bt2.png" border="0"/></a></td>
</tr>
</div>
<script type="text/javascript">
function fhead_submit(f)
{
if (!f.mb_id.value) {
alert("회원아이디를 입력하십시오.");
f.mb_id.focus();
return false;
}
if (!f.mb_password.value) {
alert("패스워드를 입력하십시오.");
f.mb_password.focus();
return false;
}
<?
if ($g4[https_url])
echo "f.action = '$g4[https_url]/$g4[bbs]/login_check.php';";
else
echo "f.action = '$g4[bbs_path]/login_check.php';";
?>
return true;
}
</script>
답변 1
background-size: cover 를 사용하셨는데요.
cover는 배경이 나타날 너비에 꽉차도록 이미지를 맞춥니다.
만약, 배경이 나타날 너비가 유동적이라면 그 위치가 변경되겠죠.
background-size: cover 를 빼시고, background-position 만을 이용해 위치를 잡아보시던가,
img 로 만들어서 이미지를 배경처럼 까는 방식을 사용해보세요.
