답변 3개
로그인 박스부분 z-index 값을 높게 주고
그 값보다 낮게 absolute 포지션의 z-index 값을 주고
width:100% height:100% 이면 끝인데요~~
답변에 대한 댓글 1개
댓글을 작성하려면 로그인이 필요합니다.
아래 코드대로 임의 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>
댓글을 작성하려면 로그인이 필요합니다.
배경에 움짤을 말씀하셨는데
움짤이라면 gif 일테고 background:url() 태그로 삽입하면되고
움짤이 아니라 비디오태그를 활용한 영상 파일을 넣는것이라면
https://offbyone.tistory.com/344">https://offbyone.tistory.com/344
위 링크를 참조해보세요.
옵션에 따라서 버튼등을 안보이게 할 수 있습니다.
댓글을 작성하려면 로그인이 필요합니다.
답변을 작성하려면 로그인이 필요합니다.
로그인
혹시나 참고 하시라고 유사한 홈페이지 올려봅니다..
메테오.net