답변 4개
사실 큰 백그라운드에 gif 애이메이션 파일을 사용 한다면 해상도에 따를 파일크기 때문에 조금 무리가 따를 듯 하지만 샘플로 올려주신 이미지의 경우는 움짤은 아니고 마우스의 위치에 따라 반응 하는 제이쿼리 플러그 인 입니다.
다음 링크를 참조해 보세요.
댓글을 작성하려면 로그인이 필요합니다.
댓글을 작성하려면 로그인이 필요합니다.
아래 코드대로 임의 html 저장해서 실행하면 위의 내용처럼 보일 겁니다
특히 body의 style의 배경관련 css적용이 중요합니다
이렇게 해야 gif이 화면에 꽉채워져서 보이게 됩니다
</strong></p>
<p><!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>
</p>
<p>
<style type="text/css">
body {
background: url('<a href="https://2.bp.blogspot.com/-YkELgIKUqWw/WehzSFeM1HI/AAAAAAAAA7I/FjCJ5PoOHBMakyDxW0b9zirq5AuLVsYWwCLcBGAs/s1600/%25E3%2585%2587%25E3%2585%2587.gif')" target="_blank" rel="noopener noreferrer">https://2.bp.blogspot.com/-YkELgIKUqWw/WehzSFeM1HI/AAAAAAAAA7I/FjCJ5PoOHBMakyDxW0b9zirq5AuLVsYWwCLcBGAs/s1600/%25E3%2585%2587%25E3%2585%2587.gif')</a> no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}</p>
<p>
#login_wrap {margin-top:200px; }</p>
<p> .login {width:360px; height:200px; margin:0 auto; background:#fff; border:1px solid #333}
.login p {text-align:center; }
</style></p>
<p><div id='login_wrap'>
<div class='login'>
<p>로그인 영역</p></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></p>
<p></div>
</div></p>
<p> </body>
</html></p>
<p> </p>
<p><strong>
댓글을 작성하려면 로그인이 필요합니다.
아래 좌표 참고해 작업해 보세요.
수정할 위치 찾기
https://homzzang.com/b/css-251">https://homzzang.com/b/css-251
배경이미지 넣기
https://homzzang.com/b/css?sca=background">https://homzzang.com/b/css?sca=background
댓글을 작성하려면 로그인이 필요합니다.
답변을 작성하려면 로그인이 필요합니다.
로그인