그누보드5 로그인화면 뒷편에 gif 넣기좀 자세히 알려주세요ㅕ
본문
지금 위사진처럼 제 홈페이지 흰로그인창 뒷부분 백그라운드에 움짤을 꽉채워 넣고싶습니다.
도무지 전질문에 이해가 안가서 다시 질문합니다.
경로와 움짤넣을수 있는 코드가 알고싶은데 봉사좀 해주실 천사분 안계십니까.
부탁좀 드리겠습니다.;
답변 4
사실 큰 백그라운드에 gif 애이메이션 파일을 사용 한다면 해상도에 따를 파일크기 때문에 조금 무리가 따를 듯 하지만 샘플로 올려주신 이미지의 경우는 움짤은 아니고 마우스의 위치에 따라 반응 하는 제이쿼리 플러그 인 입니다.
다음 링크를 참조해 보세요.
아래 코드대로 임의 html 저장해서 실행하면 위의 내용처럼 보일 겁니다
특히 body의 style의 배경관련 css적용이 중요합니다
이렇게 해야 gif이 화면에 꽉채워져서 보이게 됩니다
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="Generator" content="EditPlus®">
<meta name="Author" content="">
<meta name="Keywords" content="">
<meta name="Description" content="">
<title>Document</title>
</head>
<body>
<style type="text/css">
body {
background: url('https://2.bp.blogspot.com/-YkELgIKUqWw/WehzSFeM1HI/AAAAAAAAA7I/FjCJ5PoOHBMakyDxW0b9zirq5AuLVsYWwCLcBGAs/s1600/%25E3%2585%2587%25E3%2585%2587.gif') no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
#login_wrap {margin-top:200px; }
.login {width:360px; height:200px; margin:0 auto; background:#fff; border:1px solid #333}
.login p {text-align:center; }
</style>
<div id='login_wrap'>
<div class='login'>
<p>로그인 영역</p>
<p><input type="text" name="" placeholder="아이디" style="width:80%; height:20px"></p>
<p><input type="text" name="" placeholder="비밀번호" style="width:80%;height:20px"></p>
<p><input type="submit" style="width:80%;height:30px"></p>
</div>
</div>
</body>
</html>
답변을 작성하시기 전에 로그인 해주세요.
